How to Integrate a DIV Table with Ajax.BeginForm in MVC4

My goal is to integrate a div table with Ajax.BeginForm:

This combination will generate the following structure:

<div class="Table">
<div class="Title">
    <p>This is a Table</p>
</div>
<div class="Heading">    
    <div class="Cell"><p>Pos</p></div>
    <div class="Cell"><p>Value</p></div>
    <div class="Cell"><p>Action</p></div>
</div>
<div class="Row" id="Row_1">
<form>
    <div class="Cell"><p>1</p></div>
    <div class="Cell"><p>Hello</p></div>
    <div class="Cell"><p><input type="submit" value="Send" /></p></div>
</form>
</div>
<div class="Row" id="Row_2">
<form>
    <div class="Cell"><p>2</p></div>
    <div class="Cell"><p>World</p></div>
    <div class="Cell"><p><input type="submit" value="Send" /></p></div>
</form>
</div>

See Demo

I have encountered an issue where each row only appears in the first column. How can I resolve this? Thank you

cssajaxasp.net-mvc-4html

Answer №1

Enhance your forms by removing the Row divs and adding the .Row class to them

<div class="Table">
<div class="Title">
    <p>This is a Table</p>
</div>
<div class="Heading">    
    <div class="Cell"><p>Pos</p></div>
    <div class="Cell"><p>Value</p></div>
    <div class="Cell"><p>Action</p></div>
</div>

<form class="Row" id="Row_1">
    <div class="Cell"><p>1</p></div>
    <div class="Cell"><p>Hello</p></div>
    <div class="Cell"><p><input type="submit" value="Send" /></p></div>
</form>

<form class="Row" id="Row_2">
    <div class="Cell"><p>2</p></div>
    <div class="Cell"><p>World</p></div>
    <div class="Cell"><p><input type="submit" value="Send" /></p></div>
</form>

</div>

Answer №2

Update cell styling using CSS:

.Cell
{
   float:left;
    border: solid;
    border-width: thin;
    padding-left: 5px;
    padding-right: 5px;
    width: 200px;
}

View the example here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a tree-like design with the spry accordion換stepping up your spr

I want to style my accordion in a way that it resembles a tree structure. How can I achieve this using CSS? For example: + should be displayed when the accordion tab is closed, and - when the accordion is open. <div class="Accordion" id="systemAccordi ...

javascriptjquerycssspry

What's causing my struggle to override the bootstrap nav-link class in next.js?

I am facing an issue where I need to customize the active state of bootstrap .nav-link in the code snippet below: <li className="nav-item"> <a className={`${styles.navLink} nav-link`} role="tab" data-to ...

csstwitter-bootstrapnext.js

Sending AJAX data to the Controller for parsing and receiving the response

Check out this AJAX call that communicates with the controller: $.ajax({ type: "GET", url: '@Url.Action("getChat", "Chat")', success: function (data) { alert(data); $("#data").html(data); }, error:{ ...

asp.netajax

Spread out a div across a container's width

Currently, I am struggling to modify my css and html in order to have a div expand horizontally into a scrollable div. However, all I seem to get is the content stacking once the width limit is reached. Take a look at this fiddle for reference. The absol ...

htmlcss

Struggling to locate the Twitter direct message input box with Xpath in Selenium

I have been struggling to locate the textbox element using the find_element_by_xpath() method. Unfortunately, every time I try it, I receive an error stating that the element cannot be found. Here is the specific line of code in question: Despite attempti ...

pythoncssseleniumxpath

Do all links need an href attribute?

I'm inquiring about this because I have specific links that function as buttons to retrieve content through ajax, eliminating the need for href tags. (This inquiry is driven by SEO considerations) ...

htmlhyperlinkseo

The alignment of the navigation menu disrupts the functionality of the dropdown sub-menus

I'm finding it challenging to center the navigation menu while maintaining the functionality of the drop-down li elements. Here is my demo: http://jsbin.com/tosayosino/1/edit?html,css,js,output Removing the float:left; property from .jetmenu li succ ...

jqueryhtmlcss

If the user decides to change their answer, the current line between the two DIVs will be removed

After clicking on two DIVs, I created two lines. Now, I am facing an issue with resetting the unwanted line when changing my answer. To reset the line, you can refer to the code snippet below: var lastSelection; ...

javascriptangularjshtmlcsscanvas

Rearrange list items by dragging and dropping

Here is the HTML and TypeScript code I have implemented for dragging and dropping list items from one div to another: HTML: <div class="listArea"> <h4> Drag and Drop List in Green Area: </h4> <ul class="unstyle"> <l ...

javascriptangularhtmltypescriptdrag-and-drop

Guide to adding up the radio button values with Javascript

The tutorials I have reviewed include: How might I calculate the sum of radio button values using jQuery? How to find a total sum of radio button values using jQuery/JavaScript? How might I calculate the sum of radio button values using jQuery? Unfortu ...

javascriptjqueryhtml

In landscape mode on Safari for iOS, the final item in a vertical flexbox may be cut off

Describing my app: It is structured as a 3-row flexbox column. <div class="app" style="display: -webkit-flex; -webkit-flex-direction: column; -webkit-justify-content: space-around;"> <div class="question-header" style="-webkit-flex: 0 0 0;"&g ...

htmlioscsssafariflexbox

Guide on inserting text input value into the href attribute of a hyperlink

Lately, I've been facing an issue that has been troubling me for the past few hours. I have a search input field where users can enter text and click send. The entered text should then be added to the href attribute and sent to the results page for qu ...

javascriptjqueryhtml

Is it necessary to have the WAI-ARIA attribute aria-labelledby on a nested input element?

Do I need the attribute aria-labelledby on an <input> element nested within a <label> element that acts as a label for the <input>? For example: <label>This is an input field: <input type="text" /> </label> Or should ...

htmlwai-aria

Trouble with the Bootstrap navbar loading correctly

Recently I started using Bootstrap and decided to implement one of their templates. Everything is working fine, except for my navbar which is not loading correctly. It should look like this: Desired Navbar However, in both Chrome and Firefox, it appears l ...

htmlcsstwitter-bootstrap

The issue arises when attempting to apply CSS styles to an existing component or body tag,

I am currently working on an Angular 7 project where I have a requirement to dynamically load a component using routes. However, when I try to add styles for the body tag and existing component tags in the dynamically loaded component style-sheet, they do ...

cssangular

A guide on how to upload a Node.js project using Cute-FTP tools

Is it possible to publish a node.js project using CuteFTP? I am currently attempting to deploy my node.js project in CuteFTP, which is part of the same solution created in Visual Studio. My other project, P1, is an MVC4 project while P2 is a node.js pro ...

node.jsasp.net-mvc-4

Using two forward slashes in the URL path when making an Ajax request

Is it a problem if I include two slashes in the URL path like this: example.com/api//controllername/function I am using CodeIgniter and accidentally added an extra slash in the constant defined as API/. Since I'm working in development, there are no ...

ajaxcodeigniterurlpath

Specify the height of a div tag based on a certain condition

I'm trying to style a div tag in a specific way: If the content inside the div is less than 100px, I want the div tag's height to be exactly 100px. However, if the content's height exceeds 100px, I want the div tag's height to adjust au ...

htmlcss

Steps to Show an Image When Hovering and Clicking on the Relevant Div

CSS: .imgECheck { position: absolute; top: 0; right: 5px; width: 15px; height: 15px; display: none; } .imgFCheck { position: absolute; top: 0; right: 5px; width: 15px; height: 15px; display: none; } Is ther ...

jqueryhtmlcss

JavaScript Drag Events in Microsoft Edge (Including IE)

My drag event is functioning properly in Chrome, Safari, Firefox, and Opera. However, I encountered an error when running it on Microsoft Edge and IE: SCRIPT438: Object doesn't support property or method 'setDragImage' Below is the code sn ...

javascripthtmldrag-and-dropmicrosoft-edge