MVC C＃模式弹出 [英] MVC C# modal popup
问题描述
确定，所以我试图找出如何使用控制器根据这篇文章的建议正确调用模式弹出我的页
ok so i'm trying to figure out how to properly call a modal popup for my page using Controllers as per this post's suggestion
<一个href=\"http://stackoverflow.com/questions/861235/asp-net-mvc-modal-dialog-popup-best-practice\">ASP.NET MVC模式对话框/弹出最佳实践
和有点用这个：
<一个href=\"http://microsoftmentalist.com/2011/09/14/asp-net-mvc-13-open-window-or-modal-pop-up-and-fill-the-contents-of-it-from-the-controller-method/\">http://microsoftmentalist.com/2011/09/14/asp-net-mvc-13-open-window-or-modal-pop-up-and-fill-the-contents-of-it-from-the-controller-method/
我有了一个DropDownList一个观点，如果用户无法找到该项目/值，他/她正在寻找他的建议值（建议新的价值的链接），它应该调用控制器和返回有一对情侣在这领域的弹出页面。
I have a view that has a dropdownlist, if the user can't find the item / value that he/she is looking for he can suggest a value (suggest new value link) which is supposed to call the controller and return a popup page with a couple of fields in it.
Here're视图上的对象：
Here're the objects on the 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()') %>
这是我计划使用返回页面控制器：
The controller that I'm planning to use to return the page:
public class NewValueController : Controller{
public Actionresult New(){
return View();
}
}
现在我卡住了。我想返回一个页面，在这里我可以格式化，我一定要返回一个字符串？我不能返回一个aspx（ENGIN我使用）来代替，因为格式化方法，会更容易些？
Now I'm stuck. I wanted to return a page where I can format it, do i have to return a string ? can't i return an aspx (engin i use) instead, since formatting that would be easier?
任何意见，我应该往哪个方向走是非常AP preciated。
Any advice as to which direction i should go is very much appreciated.
谢谢！
推荐答案
您可以使用 jQuery UI的对话框，在弹出。我们有一个小设置在这里。
You could use the jquery UI Dialog for the popup. Let's have a small setup here.
我们将对主要形式的视图模型：
We would have a view model for the main form:
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; }
}
控制器：
public class HomeController : Controller
{
public ActionResult Index()
{
return View(new MyViewModel());
}
[HttpPost]
public ActionResult Index(MyViewModel model)
{
return Content("thanks for submitting");
}
}
和一个视图（〜/查看/主页/的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>
那么我们可以采取照顾弹出。我们定义了一个视图模型吧：
then we could take care for the popup. We define a view model for it:
public class NewValueViewModel
{
public string Foo { get; set; }
public string Bar { get; set; }
}
控制器：
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 });
}
}
和相应的局部视图（〜/查看/的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用户界面：
Now all that's left is to write a bit of javascript to wire everything up. We include jquery and 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文件将包含我们的code：
and a custom javascript file that will contain our code:
$(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;
});
});
这篇关于MVC C＃模式弹出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
