Web api result updating model but not view in angularjs - asp.net-mvc

I am calling Web-Api from angular-service and that returning data to my angular-controller.
$scope.$watch showing correct data, but view is not changing related data.
My Angularjs-Service is,
BDayModule.service("serviceUser", function ($http) {
this.getData = function () {
return $http.get('/Users/listAll').then(function (success) {
console.log("success.data 1 = " + success.data);
return success.data;
},
function (error) {
alert("Insertion fail");
},
function (process) {
});
};
});
My angularjs-controller is,
BDayModule.controller("ControllerUsers", function ($scope, $interval, serviceUser, commonFunction) {
$scope.allBDayData = [];
$scope.getAllUsers = function () {
var myDataPromise = serviceUser.getData();
myDataPromise.then(function (result) {
console.log("success.data 2 = " + result);
$scope.allBDayData = result;
$scope.$watch('allBDayData',
function (newValue, oldValue) {
console.log('allBDayData Changed');
console.log(newValue);
console.log(oldValue);
});
});
}
});
My view,
<div ng-controller="ControllerUsers">
<input type="button" value="Show all" ng-click="getAllUsers()" />
<table class="table table-bordered table-responsive table-hover">
<caption>
<span class="col-lg-2 col-sm-3"><input type="text" class="form-control" ng-model="Search.$" placeholder="Full filter" /></span>
</caption>
<thead>
<tr>
<th>User Name : <input type="text" ng-model="Search.UserName" placeholder="Filter" /></th>
<th>Email Address</th>
<th>First Name</th>
<th>Birth Date</th>
<th>Age</th>
<th><span aria-hidden="true" class="glyphicon glyphicon-edit"></span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in allBDayData | filter: Search">
<td>{{data.UserName}}</td>
<td>{{data.EmailId}}</td>
<td>{{data.Name}}</td>
<td>{{data.BirthDate}}</td>
<td>{{data.Age}}</td>
<td><input type="button" value="edit" class="btn btn-sm btn-success" style="width: 90px;" /></td>
</tr>
</tbody>
</table>
</div>
Button on which I click is in master page,
<li><a ng-controller="ControllerUsers" href="#list" ng-click="getAllUsers()"> Show All </a>
this button rendering page correctly based on routing, and firing getAllUsers() too. but not changing my view result...

Related

ASP.NET MVC code modal popup not sending parameter to controller

I am trying to present Organization Details in a partial view in a Bootstrap Modal. After a day of reading/watching tutorials I am stumped.
Organizations are loaded into a Table and there is a View option on each row. The table has an id="OrganizationGrid"
<table class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0" id="OrganizationGrid">
<thead>
<tr style="color:#126E75; background-color:lightcyan">
<th style=" width:5%">
#Html.ActionLink("ID", "Index", new { sortOrder = ViewBag.IDSortParm, currentFilter=ViewBag.CurrentFilter })
</th>
<th style=" width:25%">
#Html.ActionLink("Name", "Index", new { sortOrder = ViewBag.NameSortParm, currentFilter=ViewBag.CurrentFilter })
</th>
<th style=" width:25%">
Parent Org
</th>
<th style=" width:10%; text-align:center">
Website
</th>
<th style="width:25%">
Comment
</th>
<th scope="col" colspan="3" style=" width:10%; text-align:center">Action</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model) {
<tr class=" table-light">
<td style="text-align:left">
#Html.DisplayFor(modelItem => item.Id)
</td>
<td style="text-align:left">
#Html.DisplayFor(modelItem => item.Name)
</td>
<td style="text-align:left">
#Html.DisplayFor(modelItem => item.ParentOrg.Name)
</td>
<td style="text-align: center">
<a href=#Html.DisplayFor(modelItem=> item.Website) target="_blank">
<i class="fa-solid fa-globe" target="_blank" rel="noopener noreferrer"></i>
</a>
</td>
<td style="text-align:left">
#Html.DisplayFor(modelItem => item.Comment)
</td>
<td style="text-align: center">
<a asp-action="Edit" asp-route-id="#item.Id">
<i class="fas fa-edit"></i>
</a>
</td>
<td>
<a class="details" href="javascript:;">View</a>
</td>
<td style="text-align: center">
<a asp-action="Delete" asp-route-id="#item.Id">
<i class="fas fa-trash" style="color:red"></i>
</a>
</td>
</tr>
}
</tbody>
</table>
My understanding is that it triggers the JavaScript function which is currently residing at the bottom of the same page:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#OrganizationGrid .details").click(function() {
var organizationId = $(this).closest("tr").find("td").eq(0).html();
$.ajax({
type: "POST",
url: "/Organizations/Details",
data: '{organizationId: "' + organizationId + '" }',
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function(response) {
$("#partialModal").find(".modal-body").html(response);
$("#partialModal").modal('show');
},
failure: function(response) {
alert(response.responseText);
},
error: function(response) {
alert(response.responseText);
}
});
});
});
</script>
I inserted a break in the controller to see if ajax was passing the organizationId but it is not. This is the Controller Details Action method:
[HttpPost]
public ActionResult Details(int organizationId)
{
var organization = _context.Organizations
.Include(o => o.ParentOrg).Where(p=>p.Id == organizationId);
if (organization == null)
{
return NotFound();
}
return PartialView("_Details", organization);
}
If I hard code organizationId in the Controller the popup loads with the correct information BUT if I hard code organizationId in the JavaScript function it still passes a null value to the controller. Could someone please point me in the right direction.
The issue was with the JavaScript function and specifically the syntax of the data attribute in ajax. Corrected solution is as follows:
$(function () {
$("#OrganizationGrid .details").click(function () {
var organizationId = $(this).closest("tr").find("td").eq(0).html();
//alert(organizationId)
$.ajax({
type: "POST",
url: "/Organizations/Details",
data: { 'id': organizationId },
//contentType: "application/json; charset=utf-8",
//dataType: "html",
success: function (response) {
$("#viewEditOrgModal").find(".modal-body").html(response);
$("#viewEditOrgModal").modal('show');
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});

.Net 6 - Passing a radio button selected table row to a controller

I really feel like this should be easy but I’m thinking it may have changed with .Net 6. I can pass values to my controller with the input “name=’name’” but for some reason I cannot get any values from my model into my controller. I am trying to POST my row values to the controller. I am using an enumerable. I’m not sure if I should be using a or not. Another thing is how should I be populating my table row from a loop of the model. I thought using #Html. Was for older .net and tag helpers are the new way but I couldn’t get any to work populating my rows.
<form method="post">
<div id="tblPullParts" class="container justify-content-center mt-3">
<table class="table table-striped">
<thead>
<tr>
<th></th>
<th >Order #</th>
<th >Item</th>
<th >Description</th>
<th >Quantity</th>
</tr>
</thead>
<tbody>
#foreach (var p in Model)
{
<tr>
<td><input type="radio" id="radio" name="radio"
value="#Html.DisplayFor(item => p.PartID)" /></td>
#*<td><input asp-for="Selected" type="radio" value="Selected" /></td>*#
<th scope="row">#Html.DisplayFor(item => p.PartID)</th>
<td>#Html.DisplayFor(item => p.Name)</td>
<td>#Html.DisplayFor(item => p.ItemLocation)</td>
<td>#Html.DisplayFor(item => p.PartGroup)</td>
<td>#Html.DisplayFor(item => p.Description)</td>
<td>
<input type="text" asp-for="#p.Name" id="txtNameN" />
</td>
</tr>
}
</tbody>
</table>
#*<input type="text" id="#Model[0].Name" />*#
<input type="text" id="txtName" name="txtName" value="" />
</div>
<div class="text-center">
<button type="submit" class="btn btn-lg btn-success mt-3">Start Pick</button>
</div>
</form>
[HttpPost]
public async Task<IActionResult> Index( PartVM model, string radio, string txtName)
{
if (model?.PartID != 0)
{
return View("UpdatePickQuantity", model);
}
if (!String.IsNullOrWhiteSpace(txtName))
{
}
//Request.QueryString["radio"];
var lstParts = await _ordersService.GetAllParts();
return View(lstParts);
}
#Html.DisplayFor() can only display the value of model, If you want to submit the value, You need to use <input>,Here is a simple demo, I add hidden input in your form to submit the value:
#model List<PartVM>
#{
int i = 0;
}
<form method="post">
<div id="tblPullParts" class="container justify-content-center mt-3">
<table class="table table-striped">
<thead>
<tr>
<th></th>
<th >Order #</th>
<th >Item</th>
<th >Description</th>
<th >Quantity</th>
</tr>
</thead>
<tbody>
#foreach (var p in Model)
{
<tr>
<td><input type="radio" id="radio" name="radio"
value="#Html.DisplayFor(item => p.PartID)" /></td>
#*<td><input asp-for="Selected" type="radio" value="Selected" /></td>*#
<th scope="row">
#Html.DisplayFor(item => p.PartID)
<input type="hidden" asp-for="#p.PartID" name="[#i].PartID">
</th>
<td>
#Html.DisplayFor(item => p.Name)
</td>
<td>
#Html.DisplayFor(item => p.ItemLocation)
<input type="hidden" asp-for="#p.ItemLocation" name="[#i].ItemLocation">
</td>
<td>
#Html.DisplayFor(item => p.PartGroup)
<input type="hidden" asp-for="#p.PartGroup" name="[#i].PartGroup">
</td>
<td>
#Html.DisplayFor(item => p.Description)
<input type="hidden" asp-for="#p.Description" name="[#i].Description">
</td>
<td>
<input type="text" asp-for="#p.Name" name="[#i].Name" id="txtNameN" />
</td>
</tr>
i++;
}
</tbody>
</table>
#*<input type="text" id="#Model[0].Name" />*#
<input type="text" id="txtName" name="txtName" value="" />
</div>
<div class="text-center">
<button type="submit" class="btn btn-lg btn-success mt-3">Start Pick</button>
</div>
</form>
Controller
[HttpPost]
public async Task<IActionResult> Index( List<PartVM> model, string radio, string txtName)
{
//.....
}
Demo:
Your second question can refer to this github issue.
Edit============================
If you want just want to pass the row where radio is selected, you need to js to achieve this. refer to this:
Create a ViewModel
public class PartvmViewModel
{
public int PartID { get; set; }
public string Name { get; set; }
public string ItemLocation { get; set; }
public string PartGroup { get; set; }
public string Description { get; set; }
public string? txtName { get; set; }
}
controller
public IActionResult Display()
{
List<PartvmViewModel> viewmodel = new List<PartvmViewModel>();
//pass data from PartVM to PartvmViewModel
foreach (var item in PartVms)
{
viewmodel.Add(new PartvmViewModel()
{
PartID = item.PartID,
Description = item.Description,
ItemLocation = item.ItemLocation,
Name = item.Name,
PartGroup = item.PartGroup
});
}
return View(viewmodel);
}
[HttpPost]
public IActionResult Display([FromBody]PartvmViewModel model)
{
//because the value of radio is equal to PartID,SO i don't write it as parameter here
//.........
}
View
#model List<PartvmViewModel>
#{
int i = 0;
}
<form method="post">
<div id="tblPullParts" class="container justify-content-center mt-3">
<table class="table table-striped">
<thead>
<tr>
<th></th>
<th >Order #</th>
<th >Item</th>
<th >Description</th>
<th >Quantity</th>
</tr>
</thead>
<tbody>
#foreach (var p in Model)
{
<tr>
<td><input type="radio" name="radio" onclick="Method(this)"
value="#Html.DisplayFor(item => p.PartID)" /></td>
#*<td><input asp-for="Selected" type="radio" value="Selected" /></td>*#
<th scope="row">
#Html.DisplayFor(item => p.PartID)
<input type="hidden" asp-for="#p.PartID" name="[#i].PartID" id="PartID">
</th>
<td>
#Html.DisplayFor(item => p.Name)
</td>
<td>
#Html.DisplayFor(item => p.ItemLocation)
<input type="hidden" asp-for="#p.ItemLocation" name="[#i].ItemLocation" id="ItemLocation">
</td>
<td>
#Html.DisplayFor(item => p.PartGroup)
<input type="hidden" asp-for="#p.PartGroup" name="[#i].PartGroup" id="PartGroup">
</td>
<td>
#Html.DisplayFor(item => p.Description)
<input type="hidden" asp-for="#p.Description" name="[#i].Description" id="Description">
</td>
<td>
<input type="text" asp-for="#p.Name" name="[#i].Name" id="txtNameN" />
</td>
</tr>
i++;
}
</tbody>
</table>
#*<input type="text" id="#Model[0].Name" />*#
<input type="text" id="txtName" name="txtName" value="" />
</div>
<div class="text-center">
<button class="btn btn-lg btn-success mt-3" onclick="Submit()">Start Pick</button>
</div>
</form>
#section Scripts
{
<script>
var Data;
function Method(obj){
this.Data = {
"PartID":$(obj).val(),
"ItemLocation" : $(obj).parent().parent().find('td:eq(2)').find(':input').val(),
"PartGroup" : $(obj).parent().parent().find('td:eq(3)').find(':input').val(),
"Description" : $(obj).parent().parent().find('td:eq(4)').find(':input').val(),
"Name" : $(obj).parent().parent().find('td:eq(4)').find(':input').val(),
}
}
function Submit(){
Data.txtName = $("#txtName").val();
$.ajax({
url : '/Home/Display',
type : 'post',
data : JSON.stringify(Data),
contentType : 'application/json'
});
}
</script>
}
My opinion==========================
Actually, In my opinion, Pass the list of data is ok. Because i notice that you pass the value of radio into the controller, You can just use:
[HttpPost]
public async Task<IActionResult> Index( List<PartVM> model, string radio, string txtName)
{
var item = model.Where(i => i.PartID == int.Parse(radio)).FirstOrDefault();
//.....
}
to get the selected row, It is more easier than using js;
Instead of doing this
<th scope="row">
#Html.DisplayFor(item => p.PartID)
<input type="hidden" asp-for="#p.PartID" name="[#i].PartID" id="PartID">
</th>
I would do something like
<th scope="row">
<p>#p.PartID</p>
<input type="hidden" asp-for="#p.PartID" name="[#i].PartID" id="PartID">
</th>
However, I could be wrong because you are using razor syntax and I am not use to that yet ;)

MVC Partial Page returns whole page, not just the partial

I have a button on a page:
<div>
From:
<input id="fromDate" type="date" name="fromDate" value="#a.FromDate">
To:
<input id="toDate" type="date" value="#a.ToDate">
<button type="button" id="btn_transactions" class="btn btn-primary" onclick="btnTrans()"><span class="glyphicon glyphicon-search"></span></button>
<label class="buy-heading">Total Buys: #String.Format("{0:n0}", #q.BuyQuantity)</label><label class="sell-heading">Total Sells: #String.Format("{0:n0}", #q.SellQuantity)</label>
</div>
It calls this function on click:
function btnTrans() {
var postdata = { "symbol": $("#savesymbol").val(), "fromDate": $("#fromDate").val(), toDate: $("#toDate").val() };
var url = "Company/Transactions?symbol=" + $("#savesymbol").val() + "&fromDate=" + $("#fromDate").val() + "&toDate=" + $("#toDate").val();
$.ajax({
url: url,
success: function (result) {
alert(result)
$('#transTarget').html(result);
},
error: function () {
//alert("Error occured");
}
});
}
The controller method is:
public async Task<PartialViewResult> Transactions(string symbol, string
fromDate, string toDate)
{
return PartialView("Transactions");
}
This is the partial view:
<table id="transactionsTable" class="table table-bordered display hover no-wrap dataTables" style="width: 100%">
<thead>
<tr>
<th>Account Category</th>
<th>Trade Date</th>
<th>Account Name</th>
<th>Activity</th>
<th>Quantity</th>
<th>Exec Price</th>
<th>Principal</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
var a = item.accounts;
foreach (var item2 in a)
{
<tr>
<td>#item2.AcctCategory</td>
<td>#String.Format("{0:MM/dd/yyyy}", #item2.TradeDate)</td>
<td>#item2.AccountName</td>
<td>#item2.Trans</td>
<td>#String.Format("{0:n}", item2.Quantity)</td>
<td>#String.Format("{0:n}", item2.ExecutionPrice)</td>
<td>#String.Format("{0:n}", item2.PrincipalAmount)</td>
</tr>
}
}
</tbody>
</table>
I have 3 partials on this page as follows:
<div class="mycontent2">
#{Html.RenderAction("Documents", "Company");}
</div>
<div class="mycontent2">
#{Html.RenderAction("Holdings", "Company");}
</div>
<div class="mycontent2">
#{Html.RenderAction("Transactions", "Company");}
</div>
The problem is that the partial view returned from the controller method returns the WHOLE page, not just the partial part of transactions. What am I doing wrong?
Return a model from the controller. Like this;
return PartialView("Transactions", model);
Do it for others partial.
Then, you will use model in your view.
Use #{ Layout = null; } in your partial view.

Cant display values to Textbox's at second time using Jquery

I am developing MVC application.
I have shown the confirm modal box.
It works properly only at once.... If I open it again it didnt work at all...
check below picture....
when I put the entries in the dispatch text box(34), on blur event it multiplies bundle size value(60) and shows in Pisces text box (2040). its working fine,
when I close the box and open it again and put the values again in dispatch text box, its not working at all...
Here is my code...
<h2 style="font-size:22px;">Dispatch </h2>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
#using (Html.BeginForm("Create", "Dispatch", FormMethod.Post, new { enctype = "multipart/form-data", id = "frmCreate" }))
{
#Html.ValidationSummary(true)
<div class="row-fluid">
<div class="span12 roundedDiv" >
<div class="span12" style="margin-left:0px; margin-bottom:10px;">
<legend style="color:#ee8929; font-size:16px;">Primary Information</legend>
</div>
<div class="span12" style="margin-left:0px; margin-bottom:10px;">
<legend style="color:#ee8929; font-size:16px;">Product List</legend>
<div class="row-fluid">
<table class="table table-striped table-hover" id="mytable">
<thead>
<tr >
<th>
Section Name
</th>
<th>
Section Code
</th>
</tr>
</thead>
<tbody id="tbody">
#foreach (var item in ViewBag.ProductList)
{
<tr id="tableRow" >
<td >
#item.SectionName
</td>
<td >
#item.SectionCode
</td>
<td id="editRow" >
Edit
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="span11" >
<div class="span3"> Order Date : #System.DateTime.Now.ToShortDateString()</div>
<div class="span9" style="text-align:right">
<button type="button" class="btn btn-primary" id="btnDispatch" >Dispatch</button>
<input class="btn btn-default" value="Back" style="width:40px;" onclick="window.location.href='#Url.Action("index") '"/>
</div>
</div>
</div>
</div>
}
<script type="text/javascript">
$(document).ready(function () {
$('.editClass').click(function () {
$('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="btnClose1"> × </button><h5 id="dataConfirmLabel">Edit </h5> </div><div class="modal-body" ><html><table style="width:530px"><tr> <th style="width:120px">Bundle Size</th><th>Count</th><th>Dispatch</th> <th> Pieces</th> </tr><tr> <td><div id="bundleSize1" >60 </div></td> <td><div id="count1">3</div></td> <td><input id="dispatchValue1" type="text" style="width:100px ;height:15px ;margin:1px" /></td> <td> <input id="pieces1" type="text" style="width:100px ;height:15px ;margin:1px" disabled/></td> </tr> <tr> <td><div id="bundleSize2" >10</div></td> <td><div id="count2">8</div></td><td><input id="dispatchValue2" type="text" style="width:100px ;height:15px ;margin:1px" /></td><td> <input id="pieces2" type="text" style="width:100px ;height:15px ;margin:1px" disabled/></td> </tr> <tr style="border-bottom:solid #e8eef4 thick;"> <td><div id="bundleSize3" >1</div></td><td><div id="count3">20</div></td><td><input id="dispatchValue3" type="text" style="width:100px ;height:15px ;margin:1px" /></td><td> <input id="pieces3" class="txt" type="text" style="width:100px ;height:15px ;margin:1px" disabled/></td> </tr> <tr> <td colspan="3" style ="text-align: right; border-right:solid white;"> Total</td> <td> <input id="total" type="text" value="0" style="width:100px ;height:15px ;margin:1px" disabled /></td></tr></table> </html></div> <div class="modal-footer"><button type="button" id="btnOk1" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" >OK</button> <button type="button" id="btnCancel1" class="btn btn-default" data-dismiss="modal" aria-hidden="true" >Cancel</button> </div></div> ');
$('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
$('#dataConfirmModal').modal({ show: true });
});
$('body').on('click', '#btnOk1', function() {
});
$('body').on('click', '#btnCancel1', function() {
var url="#Url.Action("DispatchNow")";
$(location).attr('href', url);
});
$('body').on('click', '#btnClose1', function() {
var url="#Url.Action("DispatchNow")";
$(location).attr('href', url);
});
Below is the Blur event of textbox, where calculation take place. calculation is ok...but value dont assigned to Pieces textbox.
$('body').on('blur', '#dispatchValue1', function() {
var dispatchValue = $('#dispatchValue1').val();
var bundleSize = $('#bundleSize1').text();
var nPieces1 = dispatchValue*bundleSize;
$('#pieces1').val(nPieces1);
var ntotal= $('#total').text();
$('#supplyQuantity').val(sum);
if(ntotal > 0)
{
var ntotal = $('#total').val();
var sum = parseFloat(ntotal) +parseFloat(nPieces1);
$('#pieces1').val(sum);
$('#total').val(sum);
$('#supplyQuantity').val(sum);
}
else
{
var sum = parseFloat(nPieces1);
$('#pieces1').val(sum);
$('#total').val(sum);
$('#supplyQuantity').val(sum);
}
});
});
$(document).ready(function () {
$('#btnDispatch').click(function () {
$('body').append('<div id="dataConfirmModal1" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="btnClose"> × </button> <h5 id="dataConfirmLabel">Dispatch Alert</h5> </div><div class="modal-body"><h5>This order is dispatched.</h5><br/></div><div class="modal-footer"><button type="button" id="btnOk" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" >OK</button> </div></div> <div class="modal-backdrop"></div>');
$('#dataConfirmModal1').find('.modal-body').text($(this).attr('data-confirm'));
$('#dataConfirmModal1').modal({ show: true });
});
$('body').on('click', '#btnOk', function() {
var url="#Url.Action("index")";
$(location).attr('href', url);
});
$('body').on('click', '#btnClose', function() {
var url="#Url.Action("index")";
$(location).attr('href', url);
});
});
</script>
Can you please call alert in this code block;
$('body').on('blur', '#dispatchValue1', function() {
var dispatchValue = $('#dispatchValue1').val();
alert(dispatchValue );
var bundleSize = $('#bundleSize1').text();
alert(bundleSize);
var nPieces1 = dispatchValue*bundleSize;
$('#pieces1').val(nPieces1);
I think at second time one of that alert values is null or empty. Check that please. You lose the control of that field.

MVC multiple forms on single view not working

I have 2 forms on a single razor view that open in seperate dialog boxes. The forms are submitted using jquery post..
First form works perfectly but the second form isnt recognised at all and when I try to serializr the data it returns an empty string.
Code below:
#using (Html.BeginForm("SaveElectricReading", "Store", FormMethod.Post, new { id = "frmSaveElectricReading" }))
{
<div id="electricDialog" style="display: none;" title="Electric Readings">
<p>
Please ensure the electric readings have been entered!
</p>
<table width="100%">
<tr>
<th>
Serial:
</th>
</tr>
<tr>
<td>
<input type="text" name="Serial" />
</td>
</tr>
<tr>
<th>
Reading:
</th>
</tr>
<tr>
<td>
<input type="text" name="Reading" />
</td>
</tr>
<tr>
<th>
Comment:
</th>
</tr>
<tr>
<td>
<div class="textwrapper">
<textarea rows="5" cols="10" name="Comment"></textarea>
</div>
</td>
</tr>
</table>
</div>
}
#using (Html.BeginForm("SaveWaterReading", "Store", FormMethod.Post, new { id = "myform" }))
{
<div id="waterDialog" style="display: none;" title="Water Readings">
<p>
Please ensure the water readings have been entered!
</p>
<table width="100%">
<tr>
<th>
Serial:
</th>
</tr>
<tr>
<td>
<input type="text" name="WaterSerial" />
</td>
</tr>
<tr>
<th>
Reading:
</th>
</tr>
<tr>
<td>
<input type="text" name="WaterReadingsdfsdf" />
</td>
</tr>
<tr>
<th>
Comment:
</th>
</tr>
<tr>
<td>
<div class="textwrapper">
<textarea rows="5" cols="10" name="WaterComment"></textarea>
</div>
</td>
</tr>
</table>
</div>
}
function showWaterDialog() {
var $dialog = $('#waterDialog').dialog({
autoOpen: false,
modal: true,
width: 400,
height: 400,
buttons: {
Submit: function () {
// $('#frmCreateStore').submit();
var data = $('#frmSaveWaterReading');
$.post("/Store/SaveWaterReading",
$("#frmSaveWaterReading").serialize(),
function () {
$("#waterDialog").dialog("close");
});
//$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$dialog.dialog('open');
}
In the jquery function for showing the dialog with the form in it, I needed to add that dialog content to the second form on the page as follows:
$("#waterDialog").parent().appendTo($("form").eq(1)[0]);

Resources