Develop Reference

Add object to model list from a form ASP.NET Core Razor View

I hope some can help me with this.
I have a list within a model and I want to add objects to that list using a form in a razor view before I save it to a database
This is the model that I have:
public class ActivityForm
{
public string Name { get; set; }
public string Description { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public int Points { get; set; }
public List<Award> Awards { get; set; }
}
This is the code for my view:
#model ActivityForm
#{
ViewData["Title"] = "Activity Details";
}
<section class="my-sm-5">
<div class="container">
<div class="section-header d-flex mb-5">
<h1 class="h-02 flex-grow-1">Activity Details</h1>
</div>
<div class="row">
<div class="col-md-7">
<div class="section-header d-flex mb-5">
<h1 class="h-04 flex-grow-1">Form</h1>
</div>
<form id="form" class="row g-3 w-90" asp-action="Create">
<div class="col-md-12">
<label asp-for="Name" class="form-label">#Html.DisplayNameFor(model => model.Name)</label>
<input asp-for="Name" type="text" class="form-control" id="inputEmail4"
placeholder="#Html.DisplayNameFor(model => model.Name)">
<span asp-validation-for="Name" class="invalid-feedback"></span>
</div>
<div class="col-12">
<label asp-for="Description" class="form-label">#Html.DisplayNameFor(model =>
model.Description)</label>
<textarea asp-for="Description" class="form-control" id="exampleFormControlTextarea1" rows="5"
placeholder="#Html.DisplayNameFor(model => model.Description)"></textarea>
<span asp-validation-for="Description" class="invalid-feedback"></span>
</div>
<div class="col-md-4">
<label asp-for="StartDate" class="form-label">#Html.DisplayNameFor(model =>
model.StartDate)</label>
<input asp-for="StartDate" type="date" class="form-control"
placeholder="#Html.DisplayNameFor(model => model.StartDate)">
<span asp-validation-for="StartDate" class="invalid-feedback"></span>
</div>
<div class="col-md-4">
<label asp-for="EndDate" class="form-label">#Html.DisplayNameFor(model => model.EndDate)</label>
<input asp-for="EndDate" type="date" class="form-control"
placeholder="#Html.DisplayNameFor(model => model.EndDate)">
<span asp-validation-for="EndDate" class="invalid-feedback"></span>
</div>
<div class="col-md-4 mb-6">
<label asp-for="Points" class="form-label">#Html.DisplayNameFor(model => model.Points)</label>
<input asp-for="Points" type="number" class="form-control"
placeholder="#Html.DisplayNameFor(model => model.Points)">
<span asp-validation-for="Points" class="invalid-feedback"></span>
</div>
<div class="col-8 d-grid gap-2">
<a class="btn btn-primary mb-2" data-bs-toggle="modal" data-bs-target="#add-award">Add award</a>
<div class="row">
<div class="col-md-6">
<a class="btn btn-outline-primary w-100" data-bs-toggle="modal"
data-bs-target="#cancel-activity">Cancel</a>
</div>
<div class="col-md-6">
<a class="btn btn-outline-primary w-100" data-bs-toggle="modal"
data-bs-target="#post-activity">Post Activity</a>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-5">
<div class="section-header d-flex mb-5">
<h1 class="h-04 flex-grow-1">Awards</h1>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">Award name</th>
<th scope="col">Description</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < 1; i++)
{
<tr>
<td>Award Name</td>
<td>Award Description</td>
<td>
<a class="btn btn-outline-primary btn-sm">Edit</a>
<a class="btn btn-outline-primary btn-sm">Remove</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</section>
<div class="modal" id="add-award" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content br-20 pd-20">
<div class="modal-header justify-content-center">
<h5 class="modal-title h-04 text-prim-color">Award details</h5>
</div>
<form class="row g-3">
<div class="modal-body">
<div class="row g-3">
<div class="col-md-12">
<label asp-for="Award.Name" class="form-label">Name</label>
<input asp-for="Award.Name" type="text" class="form-control" id="inputEmail4">
</div>
<div class="col-12">
<label asp-for="Award.Description" for="inputAddress" class="form-label">Description</label>
<textarea asp-for="Award.Description" class="form-control" id="exampleFormControlTextarea1" rows="5"></textarea>
</div>
</div>
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-outline-primary w-100" data-bs-dismiss="modal">Close</button>
<input class="btn btn-primary w-100" type="submit" value="Confirm"></input>
</div>
</form>
</div>
</div>
</div>
My form is within a modal and when I click the submit button I want to create an Award object with the values from the form. After the object is created I want to add it to the Awards List and have the changes reflect on the view.
This is what the View looks like:
View with modal
And this is how it will look like after the object has been added:
View after object is added

You should first fix some issues:
Right now your form does not have a binding for the ActivityForm.Awards property. You should change:
<tbody>
#for (int i = 0; i < 1; i++)
{
<tr>
<td>Award Name</td>
<td>Award Description</td>
<td>
<a class="btn btn-outline-primary btn-sm">Edit</a>
<a class="btn btn-outline-primary btn-sm">Remove</a>
</td>
</tr>
}
</tbody>
To:
<tbody>
#for (var i = 0; i < Model.Awards.Count; i++)
{
<input type="hidden" asp-for="#Model.Awards[i].Name" />
<input type="hidden" asp-for="#Model.Awards[i].Description" />
<tr>
<td>#Model.Awards[i].Name</td>
<td>#Model.Awards[i].Description</td>
<td>
<a class="btn btn-outline-primary btn-sm">Edit</a>
<a class="btn btn-outline-primary btn-sm">Remove</a>
</td>
</tr>
}
</tbody>
Documentation for binding model to a collection: https://learn.microsoft.com/en-us/aspnet/core/mvc/models/model-binding?view=aspnetcore-6.0#collections-1
Your form should wrap around both Form and Awards sections:
<form id="form" class="row g-3 w-90" asp-action="Create">
<div class="col-md-7">
<div class="section-header d-flex mb-5">
<h1 class="h-04 flex-grow-1">Form</h1>
</div>
...
</div>
<div class="col-md-5">
<div class="section-header d-flex mb-5">
<h1 class="h-04 flex-grow-1">Awards</h1>
</div>
...
</div>
</form>
You should also change:
<a class="btn btn-outline-primary w-100" data-bs-toggle="modal" data-bs-target="#post-activity">Post Activity</a>
to an actual submit button:
<button type="submit" class="btn btn-outline-primary w-100">Post Activity</button>
Now if you manually add some awards to the Awards list from your Controller,
return View(new ActivityForm
{
Awards = new List<Award>
{
new Award { Name = "Name", Description = "Descr" },
new Award { Name = "Award 2", Description = "Descr 2" }
}
});
the awards will be displayed properly and also when you submit the form the ActivityForm.Awards list will be populated with the awards you added manually.
These issues need to be fixed before you go on and implement the add award form inside the modal.

Model List returning as null from view to controller ASP.NET Core MVC

I'm having trouble with a list within my model returning as null even tho in the view it clearly has some value.
I had trouble trying to add objects to my model's list, someone helped me and my problem was half solved. This is the code I came up with after the help
My view:
#model ActivityForm
#{
ViewData["Title"] = "Activity Details";
}
<section class="my-sm-5">
<div class="container">
<div class="section-header d-flex mb-5">
<h1 class="h-02 flex-grow-1">Activity Details</h1>
</div>
<div class="row">
<div class="col-md-7">
<div class="section-header d-flex mb-5">
<h1 class="h-04 flex-grow-1">Form</h1>
</div>
<form id="form" class="row g-3 w-90" asp-action="Create">
<div class="col-md-12">
<label asp-for="Name" class="form-label">#Html.DisplayNameFor(model => model.Name)</label>
<input asp-for="Name" type="text" class="form-control" id="inputEmail4"
placeholder="#Html.DisplayNameFor(model => model.Name)">
<span asp-validation-for="Name" class="invalid-feedback"></span>
</div>
<div class="col-12">
<label asp-for="Description" class="form-label">#Html.DisplayNameFor(model =>
model.Description)</label>
<textarea asp-for="Description" class="form-control" id="exampleFormControlTextarea1" rows="5"
placeholder="#Html.DisplayNameFor(model => model.Description)"></textarea>
<span asp-validation-for="Description" class="invalid-feedback"></span>
</div>
<div class="col-md-4">
<label asp-for="StartDate" class="form-label">#Html.DisplayNameFor(model =>
model.StartDate)</label>
<input asp-for="StartDate" type="date" class="form-control"
placeholder="#Html.DisplayNameFor(model => model.StartDate)">
<span asp-validation-for="StartDate" class="invalid-feedback"></span>
</div>
<div class="col-md-4">
<label asp-for="EndDate" class="form-label">#Html.DisplayNameFor(model => model.EndDate)</label>
<input asp-for="EndDate" type="date" class="form-control"
placeholder="#Html.DisplayNameFor(model => model.EndDate)">
<span asp-validation-for="EndDate" class="invalid-feedback"></span>
</div>
<div class="col-md-4 mb-6">
<label asp-for="Points" class="form-label">#Html.DisplayNameFor(model => model.Points)</label>
<input asp-for="Points" type="number" class="form-control"
placeholder="#Html.DisplayNameFor(model => model.Points)">
<span asp-validation-for="Points" class="invalid-feedback"></span>
</div>
<div class="col-8 d-grid gap-2">
<a class="btn btn-primary mb-2" data-bs-toggle="modal" data-bs-target="#add-award">Add award</a>
<div class="row">
<div class="col-md-6">
<a class="btn btn-outline-primary w-100" data-bs-toggle="modal"
data-bs-target="#cancel-activity">Cancel</a>
</div>
<div class="col-md-6">
<a class="btn btn-outline-primary w-100" data-bs-toggle="modal"
data-bs-target="#post-activity">Post Activity</a>
</div>
</div>
</div>
<div class="modal" id="add-award" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content br-20 pd-20">
<div class="modal-header justify-content-center">
<h5 class="modal-title h-04 text-prim-color">Award details</h5>
</div>
<div class="row g-3">
<div class="modal-body">
<div class="row g-3">
<div class="col-md-12">
<label asp-for="Award.Name" class="form-label">Name</label>
<input asp-for="Award.Name" type="text" class="form-control"
id="award-name">
</div>
<div class="col-12">
<label asp-for="Award.Description" for="inputAddress"
class="form-label">Description</label>
<textarea asp-for="Award.Description" class="form-control"
id="award-description" rows="5"></textarea>
</div>
</div>
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-outline-primary w-100"
data-bs-dismiss="modal">Close</button>
<input class="btn btn-primary w-100" type="submit" value="Confirm"></input>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-5">
<div class="section-header d-flex mb-5">
<h1 class="h-04 flex-grow-1">Awards</h1>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">Award name</th>
<th scope="col">Description</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
#if (Model.Awards != null)
{
foreach (var item in Model.Awards)
{
<tr>
<td>#item.Name</td>
<td>#item.Description</td>
<td>
<a class="btn btn-outline-primary btn-sm">Edit</a>
<a class="btn btn-outline-primary btn-sm">Remove</a>
</td>
</tr>
}
}
</tbody>
</table>
</div>
</div>
</div>
</section>
Method in controller:
[HttpPost]
public async Task<IActionResult> Create(ActivityForm data)
{
var award = data.Award;
if (award.Name != null && award.Description != null)
{
if (data.Awards == null) data.Awards = new List<AwardForm>();
data.Awards.Add(new AwardForm { Name = award.Name, Description = award.Description });
data.Award.Name = "";
data.Award.Description = "";
return View(data);
}
if (!ModelState.IsValid)
{
return View(data);
}
string userId = User.FindFirstValue(ClaimTypes.NameIdentifier);
await service.NewActivityAsync(data, userId);
return RedirectToAction(nameof(Index));
}
Model
public class ActivityForm
{
public string Name { get; set; }
public string Description { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public int Points { get; set; }
public AwardForm Award { get; set; }
public List<AwardForm> Awards { get; set; }
}
Everything was now working as intended but I had one more issue left. When I try to add another Award to the list, the list is returned to the controller method as null.
I'm not really sure if the issue is related to binding, I have noticed that every other value is bound and is returning the expected value except the list which is not bound.

Change the foreach loop to:
<tbody>
#if (Model.Awards != null)
{
#for (var i = 0; i < Model.Awards.Count; i++)
{
<input type="hidden" asp-for="#Model.Awards[i].Name" />
<input type="hidden" asp-for="#Model.Awards[i].Description" />
<tr>
<td>#Model.Awards[i].Name</td>
<td>#Model.Awards[i].Description</td>
<td>
<a class="btn btn-outline-primary btn-sm">Edit</a>
<a class="btn btn-outline-primary btn-sm">Remove</a>
</td>
</tr>
}
}
</tbody>
This has same effect to what #Victor suggested but using input tag helper instead of html helper.
Documentation for binding model to a collection: https://learn.microsoft.com/en-us/aspnet/core/mvc/models/model-binding?view=aspnetcore-6.0#collections-1
Also your form should wrap around both Form and Awards sections:
<form id="form" class="row g-3 w-90" asp-action="Create">
<div class="col-md-7">
<div class="section-header d-flex mb-5">
<h1 class="h-04 flex-grow-1">Form</h1>
</div>
...
</div>
<div class="col-md-5">
<div class="section-header d-flex mb-5">
<h1 class="h-04 flex-grow-1">Awards</h1>
</div>
...
</div>
</form>

The list binding context should include indexes to work properly.
Add to following code located below right after declaration of the <form> tag:
<form id="form" class="row g-3 w-90" asp-action="Create">
#if (Model.Awards != null)
{
for (int i=0; i < Model.Awards.Count; i++)
{
#Html.Hidden("Awards[" + i + "].Name", Model.Awards[i].Name)
#Html.Hidden("Awards[" + i + "].Description", Model.Awards[i].Description)
}
}
... your markup and control that performs the submit are located here
</form>
To be a part of the binding context these hidden fields should be declared inside the <form> from that the submit is performing.

json function return values but values not show in Textbox in mvc

Hello i want to fill text when click edit button but value not fill in textbox ,
when i debug this code json function return value and also value show in javascript code but when pop model show then value not show in textbox . any one tell where i am wrong and what is the problem in this code.
Json Function
#region Select Requisition Main Select
public JsonResult mRequisitionmain_Select(Int64 Req_ID)
{
try
{
Requisition mReq = new Requisition();
con = new SqlConnection(constring);
SqlCommand cmd = new SqlCommand("Select Req_ID,ReqNo,Comp_ID, GL_Year,ReqDate,Job,ApprovedBy,UserName, IsApproved from RequisitionMain where Req_ID='" + Req_ID + "'", con);
cmd.CommandType = CommandType.Text;
con.Open();
DataTable mDT = new DataTable();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(mDT);
mReq.Req_ID = mDT.Rows[0]["Req_ID"].ToString();
mReq.ReqNo = mDT.Rows[0]["ReqNo"].ToString();
mReq.Comp_ID = 1;
mReq.GL_Year = "2018-2019";
mReq.ReqDate = mDT.Rows[0]["ReqDate"].ToString();
mReq.Job = mDT.Rows[0]["Job"].ToString();
mReq.Approvedby = mDT.Rows[0]["ApprovedBy"].ToString();
mReq.Username = Session["AgentName"].ToString();
mReq.IsApproved = Convert.ToBoolean(mDT.Rows[0]["IsApproved"]);
con.Close();
return Json(mReq, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
throw ex;
}
}
#endregion
javascript
function getbyID(Req_ID) {
$.ajax({
url: "/Home/mRequisitionmain_Select?Req_ID=" + Req_ID,
type: "GET",
contentType: "application/json;charset=UTF-8",
dataType: "json",
success: function (result) {
$('#Req_ID').val(result.Req_ID);
$('#ReqNo').val(result.ReqNo);
$('#ReqDate').val(result.ReqDate);
$('#Job').val(result.Job);
$('#Approvedby').val(result.Approvedby);
$('#IsApproved').val(result.IsApproved);
$('#updateModel').modal('show');
$('#UpdateReq').show();
},
error: function (errormessage) {
alert(errormessage.responseText);
}
});
return false;
}
HTML
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr id="lblhead">
<th>Requisition Date</th>
<th>Job</th>
<th>Approved By</th>
<th>Action</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.items)
{
<tr>
<td style="text-align:left; width:150px;">#Html.DisplayFor(modelItem => item.ReqDate)</td>
<td>#Html.DisplayFor(modelItem => item.Job)</td>
<td style="text-align:left; width:150px;">#Html.DisplayFor(modelItem => item.Approvedby)</td>
<td style="text-align:center; width:40px;">
<a style='color:blue; text-decoration: underline; font-weight: bold;' href='#Url.Action("RequisitionDetail", "Home",new { item.Req_ID })'> View</a> |
<a data-toggle="modal" data-target="#updateModel" onclick="getbyID(#item.Req_ID)">
<i class="fa fa-edit"></i>
</a>
</td>
</tr>
}
</tbody>
<tfoot>
</tfoot>
</table>
<div class="modal fade" id="updateModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content" style="width:140%">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Update Requisition</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<form id="NewOrderForm">
<div class="modal-body">
<div class="form-row">
<div class="col" id="Req_ID">
<!-- Requisition Req_ID -->
<div class="md-form">
#Html.TextBoxFor(m=>m.Req_ID, new { #class = "form-control mr-sm-3", #id = "ReqID", Required = true })
</div>
</div>
<div class="col">
<!-- Requisition Req_NO -->
<div class="md-form">
#Html.TextBoxFor(m=>m.ReqNo, new { #class = "form-control mr-sm-3", #id = "ReqNo", Required = true })
<label for="lblRequisition">Requisition No.</label>
</div>
</div>
<div class="col">
<!-- Requisition Date -->
<div class="md-form">
#Html.TextBoxFor(m => m.ReqDate, new { #class = "form-control", #id = "ReqDate", Required = true })
<label for="lblRequisitionDatepicker">Requisition Date</label>
</div>
</div>
<div class="col">
<!-- Job -->
<div class="md-form">
#Html.TextBoxFor(m => m.Job, new { #class = "form-control", #id = "Job", Required = true })
<label for="lbljob">Job</label>
</div>
</div>
<div class="col">
<!-- Job -->
<div class="md-form">
#Html.TextBoxFor(m => m.Approvedby, new { #class = "form-control", #id = "Approvedby", Required = true })
<label for="lblApprovedby">Approved by</label>
</div>
</div>
<div class="col">
<!-- Job -->
<div class="md-form">
<div class="custom-control custom-checkbox">
<span style="float:right">
#Html.CheckBoxFor(m => m.IsApproved, new { #class = "custom-control-input", #id = "IsApproved" })
<label class="custom-control-label" for="defaultChecked2">Approved</label>
</span>
</div>
</div>
</div>
</div>
<!--Detail-->
<h5 style="margin-top:10px;color:#ff6347">Requisition Details</h5>
<hr />
<div>
<div class="form-row">
<div class="col-md-4">
<!-- Requisition Date -->
<div class="md-form">
#Html.DropDownListFor(m => m.ItemCode, ViewBag.Items as List<SelectListItem>, new { #class = "form-control", id = "ItemCode", Required = true })
</div>
</div>
<div class="col">
<!-- Job -->
<div class="md-form">
<input type="number" id="Qty" name="Qty" placeholder="Qty" class="form-control" ,Required=true />
<label for="lbljob">Qty</label>
</div>
</div>
<div class="col">
<!-- Job -->
<div class="md-form">
<input type="text" id="Remarks" name="Remarks" placeholder="Remarks" class="form-control" ,Required=true />
<label for="lblRemarks">Remarks</label>
</div>
</div>
<div class="col-md-2 col-lg-offset-4">
<a id="addToList" class="btn btn-primary">Add To List</a>
</div>
</div>
<table id="detailsTable" class="table">
<thead style="background-color:#007bff; color:white">
<tr>
<th style="width:2%">SrNo.</th>
<th style="width:40%">Items</th>
<th style="width:15%">Qty</th>
<th style="width:30%">Remarks</th>
<th style="width:10%"></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-primary" data-dismiss="modal">Close</button>
<button id="UpdateReq" type="submit" class="btn btn-primary">Save Record</button>
</div>
</div>
</form>

Trying to show the data appearing in main screen on pop up also

I'm trying to show the data appearing in main screen on pop up, but not getting any idea how to do that.The data bind on main screen is binding through database
this is the data appearing on main screen
c# code
<div class="col-md-12">
<table class="table table-striped rht-table" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td colspan="2"><h2><strong>#HttpContext.GetLocalResourceObject(_vpth, "TicketDetails", _owrpr.GlobalCultureInfo).ToString()</strong></h2></td>
</tr>
<tr class="bg-danger" style="background: #2d323e !important; border-radius: 10px;">
<th>#HttpContext.GetLocalResourceObject(_vpth, "CreatedBy", _owrpr.GlobalCultureInfo).ToString()</th>
<th>#HttpContext.GetLocalResourceObject(_vpth, "CreationDate", _owrpr.GlobalCultureInfo).ToString()</th>
<th>#HttpContext.GetLocalResourceObject(_vpth, "IssueType", _owrpr.GlobalCultureInfo).ToString()</th>
<th>#HttpContext.GetLocalResourceObject(_vpth, "AssignedTo", _owrpr.GlobalCultureInfo).ToString()</th>
<th>#HttpContext.GetLocalResourceObject(_vpth, "ClosedBy", _owrpr.GlobalCultureInfo).ToString()</th>
<th>#HttpContext.GetLocalResourceObject(_vpth, "ClosedDate", _owrpr.GlobalCultureInfo).ToString()</th>
<th>#HttpContext.GetLocalResourceObject(_vpth, "Description", _owrpr.GlobalCultureInfo).ToString()</th>
<th>#HttpContext.GetLocalResourceObject(_vpth, "Status", _owrpr.GlobalCultureInfo).ToString()</th>
<th style="padding:0px 10px;">
#HttpContext.GetLocalResourceObject(_vpth, "TimeRemaining", _owrpr.GlobalCultureInfo).ToString()
<p style="font-size:11px; margin-bottom: 5px;">HH:MM:SS</p>
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>#Html.DisplayFor(model => item.CreatedName)</td>
<td>#item.CreatedDate.ToString("dd-MMM-yyyy")</td>
#*<td>#Html.DisplayFor(model => item.IssueType)</td>*#
<td class="Esctyp"><a id="Esc_#item.EscId" class="crsr-pnt" data-toggle="modal" data-target="#EscModal">#item.IssueType</a></td>
<td>#Html.DisplayFor(model => item.AssignedPerson)</td>
<td>#Html.DisplayFor(model => item.ClosedBy)</td>
<td>
#if (item.ClosedDate.ToString("dd MMMM yyyy") != "01 January 0001")
{
#Html.Raw(item.ClosedDate.ToString("dd MMMM yyyy"))
}
</td>
<td>
#if (item.CreatorDescription.Length > 10)
{
#Html.Raw(item.CreatorDescription.Substring(0, 10) + "...")
}
else
{#Html.Raw(item.CreatorDescription) }
</td>
#*<td id="statusdiv_#item.EscId" class="statusdiv">#Html.ActionLink(#Html.DisplayFor(model => item.Status).ToString(), "Escalation")</td>*#
<td>#Html.DisplayFor(model => item.Status)</td>
<td>
<div id="clockdiv_#item.EscId" class="clockdiv" tat="#item.CreatedDate.AddHours(item.TAT)">
<div style="display:inline-flex;">
<span class="hours"></span>:<span class="minutes"></span>:<span class="seconds"></span>
</div>
</div>
</td>
</tr>
}
</thead>
</table>
</div>
This is the way the popup data design is looking and my requirement is to fill the data in this popup design template with same value which is appearing on main screen
c# code
<div class="modal fade" id="EscModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">#Session["Name"].ToString() (#Session["ErpCode"].ToString()) - #Html.TextBox("AtDate")</h4>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="col-md-6">
#HttpContext.GetLocalResourceObject(_vpth, "zone", _owrpr.GlobalCultureInfo).ToString()
<div class="clearfix"></div>
#Html.TextBox("zone")
</div>
<div class="col-md-6">
#HttpContext.GetLocalResourceObject(_vpth, "Department", _owrpr.GlobalCultureInfo).ToString()
<div class="clearfix"></div>
#Html.TextBox("Department")
</div>
</div>
<div class="col-md-12">
<div class="col-md-6">
#HttpContext.GetLocalResourceObject(_vpth, "CreatedBy", _owrpr.GlobalCultureInfo).ToString()
<div class="clearfix"></div>
#Html.TextBox("CreatedBy")
</div>
<div class="col-md-6">
#HttpContext.GetLocalResourceObject(_vpth, "CreationDate", _owrpr.GlobalCultureInfo).ToString()
<div class="clearfix"></div>
#Html.TextBox("Date")
</div>
</div>
<div class="col-md-12">
<div class="col-md-6">
#HttpContext.GetLocalResourceObject(_vpth, "Priority", _owrpr.GlobalCultureInfo).ToString()
<div class="clearfix"></div>
#Html.DropDownList("ddlPriority", new List<SelectListItem>
{
new SelectListItem { Text = "High", Value = "High" },
new SelectListItem{ Text="Medium", Value = "Medium" },
new SelectListItem{ Text="Low", Value = "Low" },
}, new { #class = "form-control" })
</div>
<div class="col-md-6">
#HttpContext.GetLocalResourceObject(_vpth, "IssueType", _owrpr.GlobalCultureInfo).ToString()
<div class="clearfix"></div>
#Html.TextBox("IssueType")
</div>
</div>
<div class="col-md-12">
<div class="col-md-6">
#HttpContext.GetLocalResourceObject(_vpth, "AssignedTo", _owrpr.GlobalCultureInfo).ToString()
<div class="clearfix"></div>
#Html.TextBox("AssignedTo")
</div>
<div class="col-md-6">
#HttpContext.GetLocalResourceObject(_vpth, "Forward", _owrpr.GlobalCultureInfo).ToString()
<div class="clearfix"></div>
#Html.DropDownList("ddlEmployee", new SelectList(ViewBag.Employee, "ErpCode", "Name", ViewData["Empl"]), "-- " +
HttpContext.GetLocalResourceObject(_vpth, "Forward", _owrpr.GlobalCultureInfo).ToString() + " --", new { #class = "form-control" })
</div>
</div>
<div class="col-md-12">
<div class="col-md-6">
#HttpContext.GetLocalResourceObject(_vpth, "Status", _owrpr.GlobalCultureInfo).ToString()
<div class="clearfix"></div>
#Html.DropDownList("ddlPriority", new List<SelectListItem>
{
new SelectListItem { Text = "Open", Value = "Open" },
new SelectListItem{ Text="Close", Value = "Close" },
}, new { #class = "form-control" })
</div>
<div class="col-md-6">
#HttpContext.GetLocalResourceObject(_vpth, "Remarks", _owrpr.GlobalCultureInfo)
<div class="clearfix"></div>
#Html.TextArea("txtDescription", "", new { #class = "form-control", rows = "3", placeholder = HttpContext.GetLocalResourceObject(_vpth, "Description", _owrpr.GlobalCultureInfo) })
</div>
</div>
<div class="col-md-12">
<div class="col-md-6">
#HttpContext.GetLocalResourceObject(_vpth, "Attachment", _owrpr.GlobalCultureInfo).ToString()
<div class="clearfix"></div>
#Html.TextBox("Attachment","", new { #class = "form-control", type = "file" })
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="btnCncl" class="btn btn-default" data-dismiss="modal">#HttpContext.GetLocalResourceObject(_vpth, "Close", _owrpr.GlobalCultureInfo).ToString()</button>
<button class="btn btn-primary" id="btnSave">#HttpContext.GetLocalResourceObject(_vpth, "Save", _owrpr.GlobalCultureInfo).ToString()</button>
</div>
</div>
</div>
</div>
I am trying to bind the data in popup through jquery like this but is anybody can suggest how to do that
Jquery
$(".Esctyp").click(function () {
$('#zone').val(_lval[0]).attr("readonly", "readonly");
$('#Branch').val(_lval[1]).attr("readonly", "readonly");
$('#CreatedBy').val(_lval[2]).attr("readonly", "readonly");
$('#Date').val(_lval[3]).attr("readonly", "readonly");
$('#ClosedBy').val(_lval[4]).attr("readonly", "readonly");
$('#ClosedDate').val(_lval[5]).attr("readonly", "readonly");
$('#ddlPriority').val(_lval[6]).attr("readonly", "readonly");
$('#IssueType').val(_lval[7]).attr("readonly", "readonly");
$('#AssignedTo').val(_lval[8]);
$('#txtDescription').val(_lval[9]);
$('#ddlPriority').val(_lval[10]);
$('#IssueDescription').val(_lval[11]);
$('#ddlEmployee').val(_lval[12]);
$('#Attachment').val(_lval[13]);
});
All the visual description are in given image

Multiple forms on a single MVC page

Below is a screenshot of my page. It has 3 tabs - Details, Users and Rights. Each tab has its own submit button which I need to fire different code within the controller (of which there is no code as of yet).
My question is, how to I have 3 separate forms on a single MVC page and how do I get each Submit button to run the respective code?
View
<div class="row-fluid">
<div class="span12">
<!-- BEGIN INLINE TABS PORTLET-->
<div class="widget">
<div class="widget-title">
<h4><i class="icon-user"></i></h4>
</div>
<div class="widget-body">
<div class="row-fluid">
<div class="span8">
<!--BEGIN TABS-->
<div class="tabbable custom-tab">
<ul class="nav nav-tabs">
<li class="active">Role Details</li>
<li>Users</li>
<li>Rights</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_1_1">
#using (Html.BeginForm("Details", "RoleController", FormMethod.Get, new { }))
{
#Html.ValidationSummary(true)
<div class="row-fluid">
<div class="span3">
#Html.HiddenFor(model => model.Id)
<div class="control-group">
<label class="control-label">#Html.DisplayNameFor(model => model.RoleName)</label>
<div class="controls controls-row">
#Html.EditorFor(model => model.RoleName)
#Html.ValidationMessageFor(model => model.RoleName)
</div>
</div>
<div class="control-group">
<label class="control-label">#Html.DisplayNameFor(model => model.Description)</label>
<div class="controls controls-row">
#Html.TextArea("Description", Model.Description, new { #cols = 400, #rows = 10 })
</div>
</div>
</div>
</div>
<input type="submit" class="btn btn-success" value="Save" />
}
</div>
<div class="tab-pane" id="tab_1_2">
#using (Html.BeginForm("UsersForRole", "RoleController", FormMethod.Post, new { }))
{
<!-- BEGIN DUAL SELECT-->
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTk5MjI0ODUwOWRkJySmk0TGHOhSY+d9BU9NHeCKW6o=" />
</div>
<div>
<table style="width: 100%;" class="">
<tr>
<td style="width: 35%">
<div class="d-sel-filter">
<span>Filter:</span>
<input type="text" id="box1Filter" />
<button type="button" class="btn" id="box1Clear">X</button>
</div>
<select id="box1View" multiple="multiple" style="height: 300px; width: 75%" runat="server">
</select><br />
<span id="box1Counter" class="countLabel"></span>
<select id="box1Storage">
</select>
</td>
<td style="width: 21%; vertical-align: middle">
<button id="to2" class="btn" type="button"> > </button>
<button id="allTo2" class="btn" type="button"> >> </button>
<button id="allTo1" class="btn" type="button"> << </button>
<button id="to1" class="btn" type="button"> < </button>
</td>
<td style="width: 35%">
<div class="d-sel-filter">
<span>Filter:</span>
<input type="text" id="box2Filter" />
<button type="button" class="btn" id="box2Clear">X</button>
</div>
<select id="box2View" multiple="multiple" style="height: 300px; width: 75%;">
#foreach (var user in Model.Users)
{
<option>#Html.DisplayFor(model => user.SurnameFirstName)</option>
}
</select><br />
<span id="box2Counter" class="countLabel"></span>
<select id="box2Storage">
</select>
</td>
</tr>
</table>
</div>
<div class="mtop20">
<input type="submit" value="Submit" class="btn" />
</div>
<!-- END DUAL SELECT-->
}
</div>
<div class="tab-pane" id="tab_1_3">
#using (Html.BeginForm("RightsForRole", "RoleController", FormMethod.Post, new { }))
{
<table class="table table-striped">
<thead>
<tr>
<th>Right Name</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var right in Model.Rights)
{
<tr>
<td>#Html.DisplayFor(model => right.RightName)</td>
<td>#Html.DisplayFor(model => right.Description)</td>
<td>
<div class="success-toggle-button">
#Html.CheckBoxFor(model => right.Assigned, new { #class = "toggle" })
</div>
</td>
</tr>
}
</tbody>
</table>
}
</div>
</div>
</div>
<!--END TABS-->
</div>
<div class="span4">
<div class="control-group">
<label class="control-label">#Html.DisplayNameFor(model => model.DateCreated)</label>
<div class="controls controls-row">
#Html.EditorFor(model => model.DateCreated, new { #readonly = "readonly" })
</div>
</div>
<div class="control-group">
<label class="control-label">#Html.DisplayNameFor(model => model.CreatedBy)</label>
<div class="controls controls-row">
#Html.EditorFor(model => model.CreatedBy, new { #readonly = "readonly" })
</div>
</div>
<div class="control-group">
<label class="control-label">#Html.DisplayNameFor(model => model.LastUpdated)</label>
<div class="controls controls-row">
#Html.EditorFor(model => model.LastUpdated)
</div>
</div>
<div class="control-group">
<label class="control-label">#Html.DisplayNameFor(model => model.LastUpdateBy)</label>
<div class="controls controls-row">
#Html.EditorFor(model => model.LastUpdateBy)
</div>
</div>
</div>
</div>
</div>
</div>
</div>
UsersForRole controller
[HttpPost]
public ActionResult UsersForRole(RoleModel model)
{
if (ModelState.IsValid)
{
}
return View(model);
}

I think that you may have something wrong in this line:
#using (Html.BeginForm("UsersForRole", "RoleController", FormMethod.Post, new { }))
Controler name in the Html.BeginForm shoudl be only Role unless your controller name is`RoleControllerController?

What you are doing looks fine, you just need to add the other Actions in your controller...
Details
RightsForRole

I think you should use Partial Views.

You can achieved the multiple form inside one form by only using three different Pages(Actions) and use tab as Actionlink. On the Actionlink you call the respective Action.
In your case there will be problem when you will post the form.
Otherwise you should use JQuery to achieve this situation.