how to create form dynamically with in form - asp.net-mvc-3

I have created an extension using formbuilder. Now I have used it in my view.
My view looks like:
#using (Html.BeginForm("addDataInd", "CustInformations", FormMethod.Post))
{
<fieldset class="field">
<legend>Addresses</legend>
<table>
<tr>
#Html.EditorFor(model => model.addresses)
</tr>
</table>
</fieldset>
}
where
#Html.EditorFor(model=>model.addresses)
calls my EditorTemplate which looks like:
<td>
#Html.hSearch("txtSearch", "", "lblsrch", "Search Text: ", "Search", "Fetch", "LookUp", new { script = "Select Aid, FullAreaName from fGetAreaTB()" }, null)
</td>
When i run the program the page looks like
i used fire bug to know the error. All I found was that, the code generated for the first
upper image (i.e. for permanent address) it doesn't create a form, but for other two it creates a form. So when I click the first search button, it doesn't work but when i click the second and third button it works well.
I just want when i run the program all the button must be in form.

You cannot nest HTML forms. For this reason you will have to use multiple forms and put them inside the template. Like this:
<fieldset class="field">
<legend>Addresses</legend>
<table>
<tr>
#Html.EditorFor(model => model.addresses)
</tr>
</table>
</fieldset>
and inside the editor template:
#model Address
<td>
#using (Html.BeginForm("addDataInd", "CustInformations", FormMethod.Post))
{
#Html.hSearch("txtSearch", "", "lblsrch", "Search Text: ", "Search", "Fetch", "LookUp", new { script = "Select Aid, FullAreaName from fGetAreaTB()" }, null)
}
</td>

Related

Add row information into Ajax.BeginForm Confirm message

I have a table with several columns. The first column contains a location name and the last column contains a delete button. When I click any of the delete buttons, it currently displays the confirmation message "Are you sure you want to delete the location:" I want the end of the confirmation message to display the location name.
Here are the relevant bits in my view:
#using (Ajax.BeginForm("FirstAjax", "Configuration", null, new AjaxOptions()
{
Confirm = "Are you sure you want to delete the location:\n",
HttpMethod = "POST",
OnFailure = "deleteFailed",
UpdateTargetId = "CustomLocations"
},
new { #id = "deleteLocation" }
))
{
<div id="reportTblDiv">
<table id="CustomLocations">
<tbody>
#foreach (var location in Model.LocationList)
{
<tr>
<td class="location">#location.LocationName</td>
<td>
<input type="submit" title=#Model.DeleteButton name="#location.LocationId" value="#Model.DeleteButton" />
</td>
</tr>
}
</tbody>
</table>
</div>
}
How can I access the correct element in Model.LocationList from the line beginning with Confirm?
Set the id of the first to be the same as the name as the second . Add a handle to the submit in javascript to update the confirm message:
<td id=#location.LocationId class="location">#location.LocationName</td>
<td>
<input type="submit" title=#Model.DeleteButton name="#location.LocationId" value="#Model.DeleteButton" onclick="return btnDeleteClicked(this);"/>
</td>
<script>
function btnDeleteClicked(btnObject){
var tLocation=$(btnObject).attr('name');
var tCurrentMessage=$("#deleteLocation").data('ajax-confirm');
$("#deleteLocation").data('ajax-confirm',tCurrentMessage + tLocation);
return true;
}
</script>

jQuery .append(html) command appending incorrectly

I am using a jQuery/Ajax call to append a partial view to a table. When the page loads, the partial view is created correctly. However, once the use attempts to append another item to the table, the formatting is incorrect despite the exact same partial view being used.
Here is the table. When this loads, the items are loaded onto the page correctly as the picture below illustrates:
<table id="fixedRows">
<thead>
<tr>
<th>State Code</th>
<th>Agent ID</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.BankListAgentId)
{
if (!String.IsNullOrWhiteSpace(item.AgentId) && item.FixedOrVariable.Equals("F"))
{
#Html.EditorFor(model => item, "FixedPartialView")
}
}
</tbody>
</table>
<br />
Add Another
Once you click the Add another link, this jQuery/Ajax call is activiated
<script type="text/javascript">
$(document).ready(function () {
$(".addFixed").click(function () {
//alert('test');
event.preventDefault();
$.ajax({
url: '#Url.Action("BlankFixedRow", "BankListMaster")',
cache: false,
success: function (html) { $("#fixedRows").append(html); }
});
});
$("#addVariable").click(function () {
event.preventDefault();
$.ajax({
url: '#Url.Action("BlankFixedRow", "BankListMaster")',
cache: false,
success: function (html) { $("#variableRows").append(html); }
});
});
});
</script>
That jQuery calls this method from the controller
public ViewResult BlankFixedRow()
{
SelectList tmpList = new SelectList(new[] { "AL", "AK", "AS", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FM", "FL", "GA", "GU", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MH", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NA", "NM", "NY", "NC", "ND", "MP", "OH", "OK", "OR", "PW", "PA", "PR", "RI", "SC", "SD", "TN", "TX", "UT", "US", "VT", "VI", "VA", "WA", "WV", "WI", "WY" });
ViewBag.StateCodeList = tmpList;
return View("FixedPartialView", new BankListAgentId());
}
Which calls this partial view
EDIT(a couple people noticed the id tag missing from the <tr>, this was just a copy/paste error for this post, the actual code has the id tag)
#model Monet.Models.BankListAgentId
#{
Layout = null;
}
#using (Html.BeginCollectionItem("BankListAgentId"))
{
<tr id="item-#Model.AgentId">
<td>
#Html.DropDownListFor(model => model.StateCode,
(SelectList)ViewBag.StateCodeList, Model.StateCode)
</td>
<td>
#Html.EditorFor(model => model.AgentId)
#Html.ValidationMessageFor(model => model.AgentId)
</td>
<td>
delete
</td>
#*<td>Delete</td>*#
</tr>
}
This is the same partial view that is called when the page first loads, which part of why I'm confused that the end result after hitting the Add another link turns out looking like this
EDIT
If you hit the Add another link twice, this is the result
EDIT
I've tried the following jQuery sucess commands with no luck
success: function (html) { $("#fixedRows > tbody:last").append(html); }
success: function (html) { $("#fixedRows tr:last").after(html); }
success: function (html) { $("#fixedRows > tbody").append(html); }
Here is the HTML that is rendered after the Add another link is clicked. I included the opening <form> tag for the form below it to show that the new rows are nowhere to be found.
<form action="/BankListMaster/Edit/11" method="post">
<fieldset>
<legend>Stat(s) Fixed</legend>
<table id="fixedRows">
<tr>
<th>State Code</th>
<th>Agent ID</th>
<th></th>
<th></th>
</tr>
<tr id="item-1164998320">
<td>
<select id="item_StateCode" name="item.StateCode"><option value="">HI</option>
<option>AL</option>
..
<option>WY</option>
</select>
</td>
<td>
<input class="text-box single-line" id="item_AgentId" name="item.AgentId" type="text" value="1164998320" />
<span class="field-validation-valid" data-valmsg-for="item.AgentId" data-valmsg-replace="true"></span>
</td>
<td>
delete
</td>
</tr>
<tr id="item-1164998219">
<td>
<select id="item_StateCode" name="item.StateCode">
<option value="">HI</option>
<option>AL</option>
..
<option>WY</option>
</select>
</td>
<td>
<input class="text-box single-line" id="item_AgentId" name="item.AgentId" type="text" value="1164998219" />
<span class="field-validation-valid" data-valmsg-for="item.AgentId" data-valmsg-replace="true"></span>
</td>
<td>
delete
</td>
</tr>
<tr id="item-0352926603">
<td>
<select id="item_StateCode" name="item.StateCode">
<option value="">GA</option>
<option>AL</option>
..
<option>WY</option>
</select>
</td>
<td>
<input class="text-box single-line" id="item_AgentId" name="item.AgentId" type="text" value="0352926603" />
<span class="field-validation-valid" data-valmsg-for="item.AgentId" data-valmsg-replace="true"></span>
</td>
<td>
delete
</td>
</tr>
</table>
<br />
Add Another
</fieldset>
</form>
Add Another
<form action="/BankListMaster/Edit/11" method="post">
EDIT
Here is a screen shot of the table in Chrome's debugger after the Add Another link is clicked. As you can see, the data pulled from the table is loaded properly in respective <tr> tags, however the empty row (which is sent via the same partial view as the rest) doesn't have any of the same table elements. The screen shot below that shows Response, however, which does include the <tr> tags
EDIT
I put a console.log(html) line in the success Ajax function so it now reads
success: function (html) {
console.log(html);
$("#fixedRows > tbody").append(html);
}
Here is the console output (state edited for readability)
<input type="hidden" name="BankListAgentId.index" autocomplete="off" value="3f7e0a92-8f20-4350-a188-0725919f9558" />
<tr>
<td>
<select id="BankListAgentId_3f7e0a92-8f20-4350-a188-0725919f9558__StateCode" name="BankListAgentId[3f7e0a92-8f20-4350-a188-0725919f9558].StateCode">
<option>AL</option>
..
<option>WY</option>
</select>
</td>
<td>
<input class="text-box single-line" id="BankListAgentId_3f7e0a92-8f20-4350-a188-0725919f9558__AgentId" name="BankListAgentId[3f7e0a92-8f20-4350-a188-0725919f9558].AgentId" type="text" value="" />
</td>
<td>
delete
</td>
</tr>
What a complete nightmare...
First off, the HTML that was being returned as viewable in Chrome's debugger was fine, however when I clicked on "View Source" for the page, I could not see anything but what was originally loaded. After finding this post, I found that this is normal. I then used this Chrome add-on to finally see that the <tr> and <td> tags were being stripped out. By simply adding an opening and closing tag to the append statement, I got the returned items to append to the table.
$(".addFixed").click(function () {
$.ajax({
url: '#Url.Action("BlankFixedRow", "BankListMaster")',
dataType: 'html',
cache: false,
success: function (html) {
$("#fixedRows > tbody").append('<tr>' + html + '</tr>');
}
});
});
I see a few things here. You're referencing <tbody> in some of your code but I don't see it anywhere in the page. So first I would suggest using <thead> and <tbody>. In your partial view I see <tr "item-#Model.AgentId"> which should have an id.
You should also remove the onclick handler and the delete button and put that in with the rest of your JavaScript. Set a class on your delete links instead.
For links that don't need urls and are only used for attaching JavaScript handlers, I recommend using href="javascript:void(0)" as this would prevent the browser from doing anything special with href="#" so then you'll be able to remove the calls to preventDefault().
As to the source of your problem, $("#fixedRows tbody").append(html) is the code you want so no need to try after(). It looks like your html is getting stripped. Try setting the dataType attribute in the $.ajax() call to html.

Using a partial view to represent a table row

I am trying to use a partial view to represent rows of a table in my project. I currently have
<table>
<thead>
<tr>
<th >
Column 1
</th>
<th >
Column 2
</th>
<th >
Column 3
</th>
</tr>
</thead>
<tbody>
#foreach(var item in Model.Items)
{
#Html.Action("ItemCalculatedView", new { Id = item.Id})
}
</tbody>
</table>
In my partial view I have this
#using (Ajax.BeginForm("SaveStuff", "Whatever",
new { id = #Model.Id }, new AjaxOptions()
{
HttpMethod = "Post",
OnSuccess = "Success"
}))
{
#Html.HiddenFor(m => m.Id)
<tr>
<td>
#Html.Label("Col1", Model.Col1)
</td>
<td>
#Html.TextBox("Number", Model.Number)
</td>
<td>
<input type="submit" id='submit-#Model.Id'/>
</td>
</tr>
}
How can I make this work?
You can put a form inside a table cell, but you can't have the form inside a tbody element, or spanning multiple columns. So there are three options:
Use a CSS layout instead of a table, or use divs with CSS display set to "table". (for example)
Put the entire form (TextBox and Submit) inside a td
Put another table inside the td element
I'd recommend #1 -- use a CSS layout to construct the table, since it's difficult to style table tags:
Main
<div class="table">
<div class="header-row">
<div class="header-cell">Column 1</th>
<div class="header-cell">Column 2</th>
<div class="header-cell">Column 3</th>
</div>
#foreach(var item in Model.Items)
{
#Html.Action("ItemCalculatedView", new { Id = item.Id})
}
</div>
Partial
#using (Ajax.BeginForm(
actionName: "SaveStuff",
controllerName: "Whatever",
routeValues: new { id = #Model.Id },
ajaxOptions: new AjaxOptions
{
HttpMethod = "Post",
OnSuccess = "Success"
},
htmlAttributes: new { #class = "row" }
))
{
<div class="cell">
#Html.HiddenFor(m => m.Id)
</div>
<div class="cell">
#Html.Label("Col1", Model.Col1)
</div>
<div class="cell">
#Html.TextBox("Number", Model.Number)
</div>
<div class="cell">
<input type="submit" id='submit-#Model.Id'/>
</div>
}
CSS
.table { display: table; }
.header-row, row { display: table-row; }
.header-cell, cell { display: table-cell; }
You have several issues here. First, as dbaseman mentions, you can't place forms within the structure of a table and have it be legal HTML. It may work, or it might not, and even if it does work, you can't guarantee it will continue to work.
I would instead wrap your table in the form, and then on the post figure out which button was pressed based on its value and/or index.
I would strongly advise against using css tables for tabular data. It's just not semantically correct.
Another possible solution is, instead of using the Ajax.BeginForm, instead use jQuery $.ajax and then you can select a row of data in javascript to post to the server.

Adding controls dynamically in mvc3 using Editortemplates

In my program I am trying to add extra controls dynamically on button click.Is it possible by using EditorTemplates?
This is my EditorTemplates
#model chPayroll.Models.HREducation.HRInfo
#{
var list = (IEnumerable<SelectListItem>)TempData["PassedDivision"];
var list1 = (IEnumerable<SelectListItem>)TempData["Country"];
}
#Html.HiddenFor(x => x.StaffId)
<tr>
<td>#Html.DropDownListFor(x => x.Country, list1, "-select-")</td>
<td>#Html.TextBoxFor(x=>x.Board)</td>
<td>#Html.TextBoxFor(x=>x.Level)</td>
<td>#Html.TextBoxFor(x=>x.PassedYr)</td>
<td>#Html.DropDownListFor(x=>x.PassedDivision,list,"-selected-")</td>
<td><input type="file" name="file"></td>
</tr>
Now I want to add all controls dynamically on button click.
I am calling listeditor from the view.
#model chPayroll.Models.HREducation.HRInfo
<div align="left">
<fieldset style="left:0px">
#using (Html.BeginForm("Addcontrols", "HREduInformation", FormMethod.Post))
{
<table >
<tr>
<th >Country</th>
<th>Board</th>
<th>Level</th>
<th>Passed Year</th>
<th>Division</th>
<th>certificate</th>
</tr>
#Html.EditorFor(m => m.listInfoeditor)
</table>
<input type="submit" value="Add New" id="savechanges" />
}
</fieldset>
</div
You can use Ajax to grab the rendered control Html.
Editing a variable length list
You can also go one step further and avoid the ajax call by using an already rendered template on the client side

Ajax.BeginForm with UpdateTarget Inside AjaxForm

Is this possible to use Ajax.Beginform with update target inside of ajax form. like this:
using(Ajax.BeginForm("EditPhone", new { id = item.Id.Value }, new AjaxOptions {
UpdateTargetId = "TRTarget"})) {
<tr class="gradeA odd" id="TRTarget">
<input type"submit" value="submit" />
</tr>
}
Update
OK if it's possible so what is wrong with this?
This is my partial view that another partial view rendered inside it:
using(Ajax.BeginForm("EditPhone", new { id = item.Id.Value }, new AjaxOptions {
UpdateTargetId = "TRTarget"})) {
<tr class="gradeA odd" id="TRTarget">
#{Html.RenderPartial("_PhoneRow", item);}
</tr>
}
and _PhoneRow:
#model MyModel
<td>#Html.DisplayFor(model=>model.Number)</td>
<td>#Html.DisplayFor(modelItem => Model.PhoneKind)</td>
<td><input type="submit" value="Edit" class="button" /></td>
And EditPhone Action:
public ActionResult EditPhone(long Id){
//Get model
return PartialView("_EditPhoneRow", model);
}
And _EditPhoneRow:
<td>#Html.EditorFor(model => model.MainModel.Number)</td>
<td>#Html.EditorFor(model => model.MainModel.PhoneKind)</td>
<td><input type="submit" value="Save" class="button" /></td>
Actually each of my rows have an Ajax form so when click on edit I want to replace the row with another as you see, but when I add the Edit, all of my page destroyed and just _EditPhoneRow shown like I select all page for updateTrget where is the problem? and what is your suggestion to change all the specific row like this?
According to the HTML specification forms cannot be nested. This produces invalid HTML and depending on the user agent either the outer or the inner <form> simply won't work. That's a limitation of the HTML specification, don't be confused with ASP.NET MVC, it has nothing to do with it. One possibility is to replace your Ajax.BeginForm with an Ajax.ActionLink:
<tr class="gradeA odd" id="TRTarget">
#Ajax.ActionLink(
"Submit",
"EditPhone",
new { id = item.Id.Value },
new AjaxOptions { UpdateTargetId = "TRTarget" }
)
</tr>
UPDATE:
After you have updated your question and explained the symptoms I think you might have forgotten to reference the jquery.unobtrusive-ajax.min.js script to your page:
<script type="text/javascript" src="#Url.Content("~/scripts/jquery.unobtrusive-ajax.min.js")"></script>
If you don't include this script the Ajax.* helpers such as Ajax.BeginForm and Ajax.ActionLink will be simple HTML forms and anchors. No AJAX at all. It is this script that reads the HTML5 data-* attributes emitted by those helpers and unobtrusively AJAXifies them.

Resources