mvc PartialView with Dialog Partial View showing html
我想要做的是打开一个jquery对话框。
发生的事情是,当我尝试打开PartialView时,我看到以下html文本与表单的呈现:
1 2 3 4 5 6 7 8 9 | <form action="/Plt/FileUpload" method="post"><input data-val="true" data-val-number="The field PlNum must be a number." data-val-required="The PlNum field is required." id="PlNum" name="PlNum" type="hidden" value="36028" /> <p> File upload for Pl# 36028 </p> <input type="file" name="file" /> <input type="submit" value="OK" /> </form> |
这是控制器动作:
1 2 3 4 5 | public ActionResult FileUpload(int id) { var model = new FileUpload { PlNum = id }; return PartialView(model); } |
这是PartialView的视图:
1 2 3 | @model Ph.Domain.Lb.Models.FileUpload <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | @using (Html.BeginForm("FileUpload","Plts", FormMethod.Post, null)) { @Html.HiddenFor(a => a.PlNum) @if (TempData["ErrMessage"] != null) { @TempData["ErrMessage"] } <p> File upload for Pl# @Model.PlNum </p> <input type="file" name="file" /> <input type="submit" value="OK" /> } |
这是我的ajax调用的样子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var url = '@Url.Action("FileUpload","Plt")' + '?id=' + encodeURIComponent(rowid); $.ajax({ url: url, type: 'GET', success: function(result) { if (result.success) { $('#dialog').dialog('close'); } else { // refresh the dialog $('#dialog').html(result); } } |
回顾一下,ajax调用确实到达ActionResult,但不确定它何时尝试显示部分视图,它显示HTML与渲染的html。
这里的问题是你正在尝试加载尚未渲染到对话框的innerHTML中的剃刀视图。相反,您应该做的是在创建对话框时将对话框的href属性设置为URL.Action链接。请参阅以下链接以获取示例。
http://www.matthidinger.com/archive/2011/02/22/Progressive-enhancement-tutorial-with-ASP-NET-MVC-3-and-jQuery.aspx
另一个选项,它不是可维护的IMO,但它将以您当前的方式工作,是从操作方法返回原始HTML。
我认为第一种解决方案更好,因为控制器没有被HTML字符串连接污染。
jQuery不允许你在
相反,原生DOM HTML注入:
1 | $('#dialog')[0].innerHTML = result; |
。
或者,将其设置为数据属性并手动加载:
在视图中:
1 2 3 | <form action="/Plt/FileUpload" ... data-script="@Url.Content("~/Scripts/jquery.validate.min.js")" ... /> |
在JS中:
1 2 3 | $('#dialog').html(result); var dialogScript = $('#dialog').children().first().data("script"); if(!!dialogScript) { $.getScript(dialogScript); }; |
参考:http://api.jquery.com/jQuery.getScript/
。
另一种方法是使用
1 2 3 4 | $("#dialog").load(url, null, function() { // on a side note, put $("#dialog") in a variable and reuse it $("#dialog").dialog(); }); |
参考:http://api.jquery.com/load/
。
在jQuery验证的情况下,我会考虑将其添加到父页面本身。您希望它可以在相当多的情况下使用。