jQuery MVC C# 模式弹出窗口

MVC C# modal popup

提问by gdubs

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

好的，所以我想弄清楚如何根据这篇文章的建议使用控制器正确调用我的页面的模式弹出窗口

ASP.NET MVC modal dialog/popup best practice

ASP.NET MVC 模态对话框/弹出窗口最佳实践

and kinda used this:

有点用这个：

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-控制器方法/

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 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();
   }
}

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?

现在我被困住了。我想返回一个可以格式化的页面，我必须返回一个字符串吗？我不能返回一个 aspx（我使用的引擎），因为格式化会更容易吗？

Any advice as to which direction i should go is very much appreciated.

任何关于我应该去哪个方向的建议都非常感谢。

Thanks!

谢谢！

回答by Darin Dimitrov

You could use the jquery UI Dialogfor the popup. Let's have a small setup here.

您可以将jquery UI Dialog用于弹出窗口。让我们在这里做一个小设置。

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; }
}

a controller:

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return Content("thanks for submitting");
    }
}

and a view (~/Views/Home/Index.aspx):

和一个视图 ( ~/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>

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; }
}

a 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 });
    }
}

and a corresponding partial view (~/Views/NewValue/New.ascx):

以及相应的局部视图 ( ~/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>
<% } %>

Now all that's left is to write a bit of javascript to wire everything up. We include jquery and jquery ui:

现在剩下的就是编写一些 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>

and a custom javascript file that will contain our code:

以及一个包含我们代码的自定义 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;
    });
});

回答by narsimhareddy venna

$('#CheckGtd').click(function () {
    if ($(this).is(":checked"))
        $("#tbValuationDate").attr("disabled", false);
    else
        $("#tbValuationDate").attr("disabled", "disabled");
});