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/

私はドロップダウンリストを持っていますが、ユーザーが探しているアイテム/値を見つけることができない場合は、そのアイテムを呼び出すはずの値（新しい値のリンクを提案する）を提案できます。コントロールrを押してポップアップページを表示し、そこにいくつかのフィールドを表示します。

Here'reビュー上のオブジェクト：私はページを返すために使用することを計画しています

<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（engin私は代わりに使用します）を返すことはできません、より簡単なフォーマットですか？

どの方向に進むべきかアドバイスをいただければ幸いです。

ありがとうございます！

Answer 1

ポップアップにjquery UI Dialogを使用できます。ここで小さな設定をしましょう。

私たちは、メインフォームのビューモデルだろう。そして、私たちが取ることができる

<%@ 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 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を）ポップアップを気にする。我々はそれのためにビューモデルを定義します。

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を使ってすべてを配線します。我々のコードが含まれますジャバスクリプトファイル

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

とカスタム：：私たちは、jQueryとjQueryのUI含ま

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