преобразовать форму страницы в форму модального диалога

Question

i'm смотрит, как создать модальный диалог с формой; i 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"); 
      } 
     } 

я используйте что-то вроде этого один раз, но я знаю, как изменить, чтобы recibe мою страницу с формой, или как это сделать.

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 должен быть экстернализированы в отдельный файл, но для целей этой демонстрации я уезжаю это в представлении.