好吧,所以我正在尝试弄清楚如何根据这篇文章的建议使用 Controller 正确调用我的页面的模式弹出窗口
ASP.NET MVC modal dialog/popup best practice
并且有点用这个:
我有一个具有下拉列表的 View ,如果用户找不到他/她正在寻找的项目/值,他可以建议一个值(建议新值链接),该值应该调用 Controller 并返回一个弹出页面,其中有几个字段。
这是 View 上的对象:
<script type="text/javascript">
loadpopup = function ()
{
window.showModalDialog(‘/NewValue/New′ , "loadPopUp", ‘width=100,height=100′);
}
</script>
<%: Html.DropDownList(model => model.ValueId, new selectlist........... %>
<%: Html.ActionLink("Suggest Value", "New", "NewValue", null, new { onclick = 'loadpopup()') %>
我计划用于返回页面的 Controller :
public class NewValueController : Controller{
public Actionresult New(){
return View();
}
}
现在我被困住了。我想返回一个可以格式化它的页面,我是否必须返回一个字符串?我不能返回一个 aspx (我使用的引擎),因为格式化会更容易吗?
非常感谢任何关于我应该走哪个方向的建议。
谢谢!
最佳答案
您可以使用jquery UI Dialog对于弹出窗口。让我们在这里进行一个小设置。
我们将为主窗体提供一个 View 模型:
public class MyViewModel
{
public string ValueId { get; set; }
public IEnumerable<SelectListItem> Values
{
get
{
return new[]
{
new SelectListItem { Value = "1", Text = "item 1" },
new SelectListItem { Value = "2", Text = "item 2" },
new SelectListItem { Value = "3", Text = "item 3" },
};
}
}
public string NewValue { get; set; }
}
Controller :
public class HomeController : Controller
{
public ActionResult Index()
{
return View(new MyViewModel());
}
[HttpPost]
public ActionResult Index(MyViewModel model)
{
return Content("thanks for submitting");
}
}
和一个 View (~/Views/Home/Index.aspx
):
<%@ Page
Language="C#"
MasterPageFile="~/Views/Shared/Site.Master"
Inherits="System.Web.Mvc.ViewPage<AppName.Models.MyViewModel>"
%>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<% using (Html.BeginForm()) { %>
<%= Html.DropDownListFor(x => x.ValueId, Model.Values) %>
<br/>
<%= Html.EditorFor(x => x.NewValue) %>
<%= Html.ActionLink("Suggest Value", "New", "NewValue", null, new { id = "new-value-link" }) %>
<button type="submit">OK</button>
<% } %>
<div id="dialog"></div>
</asp:Content>
然后我们就可以处理弹出窗口了。我们为它定义一个 View 模型:
public class NewValueViewModel
{
public string Foo { get; set; }
public string Bar { get; set; }
}
Controller :
public class NewValueController : Controller
{
public ActionResult New()
{
return PartialView(new NewValueViewModel());
}
[HttpPost]
public ActionResult New(NewValueViewModel model)
{
var newValue = string.Format("{0} - {1}", model.Foo, model.Bar);
return Json(new { newValue = newValue });
}
}
和相应的部分 View (~/Views/NewValue/New.ascx
):
<%@ Control
Language="C#"
Inherits="System.Web.Mvc.ViewUserControl<AppName.Models.NewValueViewModel>"
%>
<% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "new-value-form" })) { %>
<%= Html.EditorFor(x => x.Foo) %>
<%= Html.EditorFor(x => x.Bar) %>
<button type="submit">OK</button>
<% } %>
现在剩下的就是编写一些 JavaScript 来连接所有内容。我们包括 jquery 和 jquery ui:
<script src="<%: Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery-ui-1.8.11.js") %>" type="text/javascript"></script>
以及一个包含我们的代码的自定义 JavaScript 文件:
$(function () {
$('#new-value-link').click(function () {
var href = this.href;
$('#dialog').dialog({
modal: true,
open: function (event, ui) {
$(this).load(href, function (result) {
$('#new-value-form').submit(function () {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (json) {
$('#dialog').dialog('close');
$('#NewValue').val(json.newValue);
}
});
return false;
});
});
}
});
return false;
});
});
关于asp.net-mvc - MVC C# 模态弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11534788/