將頁面表單轉換爲模式對話框形式

Question

我正在尋找如何使用表單創建模式對話框;我alredy有asp.net mvc上的表單，是一個頁面;我想，表單是在模態對話框上收取的。

任何人都知道該怎麼做，或者我在哪裏可以找到一些信息，「引起的一切，我發現正在創造一種新的形式，但我不知道該怎麼做我需要

dialog.load(
    $("#dialog").dialog({ 
     close: function(event, ui) { 
      dialog.remove(); 
     }, 
     resizable: false, 
     height: 140, 
     width: 460 
     modal: true, 
     buttons: { 
      "Ok": function() { 
       $(this).dialog("close"); 
       isConfirmed = true; 
       $("form").submit(); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     } 

我使用類似這樣的東西一次，但我知道如何改變以重新形成我的網頁，或如何去做

Answer 1

第一步是將此窗體放入局部視圖中，並讓控制器操作爲此部分。因此，讓我們採取抽樣控制器：

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

    public ActionResult MyForm() 
    { 
     var model = new MyViewModel(); 
     return PartialView(model); 
    } 

    [HttpPost] 
    public ActionResult MyForm(MyViewModel model) 
    { 
     if (!ModelState.IsValid) 
     { 
      // there were validation errors => redisplay 
      // the form so that the user can fix them 
      return PartialView(model); 
     } 

     // at this stage validation has passed => we could do 
     // some processing and return a JSON object to the client 
     // indicating the success of the operation 
     return Json(new { success = true }); 
    } 
} 

的MyForm的行動，分別用於顯示錶格，提交時處理它。索引操作只會提供包含允許彈出模式的鏈接的視圖。

所以這裏的MyForm.cshtml部分：

@model MyViewModel 

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "dialog", OnSuccess = "submitSuccess" })) 
{ 
    @Html.LabelFor(x => x.Foo) 
    @Html.EditorFor(x => x.Foo) 
    @Html.ValidationMessageFor(x => x.Foo) 
    <button type="submit">OK</button> 
} 

終於Index.cshtml觀點：

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function() { 
     // we subscribe to the click handler of the link 
     $('#mylink').click(function() { 
      // when the anchor is clicked we attach the dialog to the div 
      var url = this.href; 
      $('#dialog').dialog({ 
       open: function (event, ui) { 
        // when the dialog is shown we trigger an AJAX request 
        // to the MyForm action to retrieve the contents of the 
        // form and show it 
        $(this).load(url); 
       } 
      }); 
      return false; 
     }); 
    }); 

    // this function is used by the Ajax form. It is called 
    // when the form is submitted.  
    var submitSuccess = function (result) { 
     // we check to see if the controller action that was 
     // supposed to process the submission of the form 
     // returned a JSON object indicating the success of the 
     // operation 
     if (result.success) { 
      // if that is the case we thank the user and close the dialog 
      alert('thanks for submitting'); 
      $('#dialog').dialog('close'); 
     } 
    }; 
</script> 

@Html.ActionLink("Show modal form", "myform", null, new { id = "mylink" }) 
<div id="dialog"></div> 

顯然的JavaScript應外在到一個單獨的文件，但對於這個演示的目的，我要離開它在視圖中。