MVC C＃模式彈出

Question

確定，所以我試圖找出如何使用控制器按照這篇文章的建議正確調用模式彈出我的網頁

ASP.NET MVC modal dialog/popup best practice

還挺用這個：

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/

我有一個看法，有一個下拉列表，如果用戶找不到他/她正在尋找的項目/值，他可以建議一個值（建議新值鏈接），應該調用controlle r並返回一個帶有幾個字段的彈出頁面。

我這裏還有的在視圖對象：

<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()') %> 

，我打算使用返回頁面控制器：

public class NewValueController : Controller{ 
    public Actionresult New(){ 
     return View(); 
    } 
} 

現在我被困。我想返回一個頁面，我可以格式化它，我必須返回一個字符串嗎？我不能返回一個aspx（我使用），因爲格式化會更容易？

任何意見，我應該去哪個方向非常感激。

謝謝！

Answer 1

您可以使用jquery UI Dialog作爲彈出窗口。讓我們在這裏做一個小設置。

我們將不得不爲主要形式的視圖模型：

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

的圖，（~/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> 

那麼我們可以採取關心彈出窗口。我們定義了一個視圖模型爲它：

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

和相應的局部視圖（~/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用戶界面：

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

Answer 2

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