使用MVC和JQuery动态地,一致地向表中添加值
我有一个表格,里面可以有多个值。
例如:
请列出您的家属。
我有一个包含我的三个字段的字段集
- 名字,
- 姓,
- 出生日期
以及添加按钮。
我的添加按钮触发了jQuery ajax请求,并在成功时向表中添加了一个表行
伪代码:
$.ajax({ url: myUrl, data: myData, success: function(){ var row = $(""); row.append("").text(txtFirstName.val()); row.append(" ").text(txtLastName.val()); row.append(" ").text(dteDateOfBirth.val()); row.appendTo($("#myDependantsTable")); } ... });
这很好用。 但是,现在我在两个不同的地方定义了我的HTML,我的javascript和我的视图
IE:
@Model.FirstName @Model.LastName @Model.DateOfBirth
当我开始修改这些问题时会出现问题,例如,在日期列上添加一个类,我需要修改代码两次。
反正这个问题呢?
我想要:
- 在没有回发的情况下添加“ajaxy”的行
- 一致的布局,我只需要在一个地方进行更改
您可以使用AJAX请求调用控制器操作以返回包含行的局部视图。 生成表时使用的部分相同。 因此,不要使用javascript操作HTML,只需将返回的部分附加到表中:
$.ajax({ url: myUrl, data: { // That's to bind to the view model that the controller // action you are invoking with the AJAX request takes // as parameter firstName: txtFirstName.val(), lastName: txtLastName.val(), dob: dteDateOfBirth.val() } success: function(result) { $("#myDependantsTable").append(result); } ... });
在你的标记中:
@foreach(var item in Model) { @Html.Partial("_Row", item) }
现在你的控制器动作将返回相同的部分:
public ActionResult SomeActionInvokedWithAjax(MyViewModel model) { return PartialView("_Row", model); }
- 如何通过Jquery调用MVC FileContentResult并让它提示用户保存它的返回值?
- MVC3 Razor和Modal弹出窗口
- 如何在没有额外的&符号麻烦的情况下将正确的Url.Action传递给JQuery方法?
- ASP.Net MVC 3 JQGrid
- JQueryvalidation选项无法使用MVC3 Razor
- 字符串的长度超过maxJsonLength属性上设置的值。 在MVC3中
- ASP.net MVC 3 jQueryvalidation; 禁用Unobtrusive OnKeyUp?
- asp.net mvc3返回多个json列表
- 如何更改网格中的每个元素?
Interesting Posts
ASP.net MVC 3 Razor – jQuery Intellisense
如何发布一个空数组(整数)(jQuery – > MVC 3)
如何在特定时间段内在单个视图上加载多个局部视图?
如何使用asp.net mvc 3 jqueryvalidation与jjery对话框进行ajax提交?
如何在MVC3 Ajax.ActionLink OnBegin,OnComplete Events中使用$(this)
使用jquery的viewbag – asp.net mvc 3
如果使用jqueryvalidation发生validation错误,则将类添加到父div
使用jQuery选择/提交仅更改的表单字段
如何重定向到$ .AJAX完整的视图 – asp.net mvc 3
解决方法为Asp.Net Mvc3上的ajax动态加载的视图启用表单validation