2010-11-01 4 views
2

Я действительно смущен, глядя на так много подходов, как JQuery и AJAX используются с MVC, и нет надлежащей документации, которую я нашел.MVC и AJAX vs JQuery

У меня очень распространенный сценарий в моих приложениях, где у меня есть форма, которая будет представлять собой частичный просмотр, который будет сохранен в базе данных, если он действителен и если не покажет пользователю такую ​​же форму снова и покажет ошибку на стр.

Простейший способ сделать это? Могу ли я достичь этого, используя простой AJAXForm, или мне придется использовать JSON и JQuery?

<script type="text/javascript"> 

     function successContactList() { 
       alert("Success."); 
     } 

     function failureContactList() { 
      alert("Error."); 
     } 

    </script> 


    <% using (Ajax.BeginForm("SaveMailingList", "Contacts", new AjaxOptions { OnFailure = "failureContactList", OnComplete = "successContactList", UpdateTargetId = "ContactArea" })) { %> 
    <div id="ContactArea"> 

     <%: Html.EditorFor(Model => Model) %> 
     <input type="submit" value="Save" /> 
    </div> 
    <% } %> 



    [HttpPost] 
     public ActionResult SaveMailingList(IEnumerable<ContactsInMailingListsViewModel> contactInMailing) { 
      var mailingList = contactInMailing.FirstOrDefault(); 
      var contact = repository.GetContactById(mailingList.ContactId); 
      repository.UpdateMailingList(contactInMailing,contact); 
      contactInMailing.FirstOrDefault().EndDate = new DateTime(2077,1,1); 
      return PartialView(contactInMailing); 

     } 

ответ

1

Я вижу две проблемы с вашим вопросом.

  1. Изучали ли вы свои условия? jQuery часто используется для выполнения манипуляций AJAX, а MVC обозначает Model-View-Controller, что является одним из способов структурирования кода на стороне сервера (разделение представления и кода обслуживания). JSON может использоваться для обмена данными и манипуляций (немного похоже на XML, только проще) и не требуется, когда вы используете формы.
  2. Вы не сказали нам, какая у вас технология на стороне сервера. Хотя формы являются основными частями спецификации html, вам все равно придется обращаться с ними как-то на стороне сервера.
+0

Извините за мой титул, который мало confusing.I я использую ASP.NET MVC 2.Currently Я использую Ajax. BeginForm в MVC. Проблема заключается в том, что ее вызов действия контроллера, но я не обновляюсь после завершения действия. Я обновил свой код выше в актуальном вопросе. – 2010-11-01 18:07:17

+0

@Mathew: извините, я не использовал ASP.NET, поэтому я не могу вам помочь. Надеюсь, кто-то еще сможет помочь. – darioo

2

Самый прямой ответ на ваш вопрос есть. Да!

AJAX и MVC - абстрактные понятия. Они действительно не имеют большого значения вне контекста реализации. Например, JQuery реализует концепцию AJAX, а Symphony реализует концепцию MVC.

Что вам нужно сделать? Каковы ваши требования? Какой пользовательский интерфейс вам нужен?

Если вы просто выполните некоторую простую проверку ошибок в форме. Во что бы то ни стало просто создайте базовую запись в формате html, верните встроенную в свою реализацию MVC.

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

Что касается использования каких-либо применений. Я бы посмотрел, что ваш MVC встроил. Если по какой-то причине он еще не предоставляет систему ajax. Я лично, как JQuery.

+0

Спасибо за ваш ответ. Я обновил код на всякий случай, если вы можете проверить. – 2010-11-01 18:12:05

0

я сделал ниже, и он работал на меня в MVC 3.

В моем случае я имел 3 формы (3 частичные) на странице, и я просто хотел их представить с помощью AJAX и обновить соответствующий частичный вид ,

После обновления формы динамически необходимо добавить обратно обработчик событий отправки, а также вызвать $ .validator.unobtrusive.parse ('# Form1); чтобы сделать работу по проверке на стороне клиента для следующих отправлений.

Используется ниже для получения частичного представления html в строке в методе действий контроллера.

//Renders Partial View as a string 
//Parameters: Calling Controller Context, partial view name, model 
//Reference:http://stackoverflow.com/questions/3234003/render-view-programmatically-into-a-string 
public static string RenderPartialViewToString(ControllerContext context, string viewName, object model) 
    { 
     if (string.IsNullOrEmpty(viewName)) 
      viewName = context.RouteData.GetRequiredString("action"); 

     context.Controller.ViewData.Model = model; 

     using (StringWriter sw = new StringWriter()) 
     { 
      ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(context, viewName); 
      ViewContext viewContext = new ViewContext(context, viewResult.View, context.Controller.ViewData, context.Controller.TempData, sw); 
      // copy model state items to the html helper 
      foreach (var item in viewContext.Controller.ViewData.ModelState) 
       if (!viewContext.ViewData.ModelState.Keys.Contains(item.Key)) 
       { 
        viewContext.ViewData.ModelState.Add(item); 
       } 

      viewResult.View.Render(viewContext, sw); 

      return sw.GetStringBuilder().ToString(); 
     } 
    } 

1.Индекс View -

<script type='text/javascript'> 
    $(document).ready(function() { 

    //Add Event handlers for the forms after document is ready. 
    $("#Form1").submit(Form1SubmitHandler); 

    $("#Form2").submit(Form2SubmitHandler); 

    $("#Form3").submit(Form3SubmitHandler); 
}); 

//Submit Event handler for Form1Form 
function Form1SubmitHandler(event) { 
    event.preventDefault(); 
    if ($("#Form1").valid()) { 
     Form1Ajax(); 
    } 
} 

//Submit Event handler for Form2 Form 
function Form2SubmitHandler(event) { 
    event.preventDefault(); 
    if ($("#Form2").valid()) { 
     Form2Ajax(); 
    } 
} 

//Submit Event handler for Form3 Form 
function Form3SubmitHandler(event) { 
    event.preventDefault(); 
    if ($("#Form3").valid()) { 
     Form3Ajax(); 
    } 
} 

//Submit Form1 
function Form1Ajax() { 
    if ($("#Form1").valid()) 
    { 
     $.ajax({ 
      type: 'POST', 
      url: '@Url.Action("Action1", "Controller")', 
      cache: false, 
      data: { //send your form values here 
      }, 
      dataType: "json", 
      success: function (data) { 
       if (data.IsSuccess) { 

        //Update the partial view. 
        $("#Form1Partial").html(data.ViewHtml); 

        //Have to call this to make client side validation work after dynamically adding a form. 
        $.validator.unobtrusive.parse('#Form1'); 

        //Add event handler for submit. 
        $("#Form1").bind("submit", Form1SubmitHandler); 
       } 
       else { 

        //Update the partial view. 
        $("#Form1Partial").html(data.ViewHtml); 


        //Have to call this to make client side validation work after dynamically adding a form. 
        $.validator.unobtrusive.parse('#Form1); 

        //Add event handler for submit. 
        $("#Form1").bind("submit", Form1SubmitHandler); 
       } 
      } 
     }); 
    } 
} 

//Submit Form2 
function Form2Ajax() { 
    if ($("#Form2").valid()) 
    { 
     $.ajax({ 
      type: 'POST', 
      url: '@Url.Action("Action2", "Controller")', 
      cache: false, 
      data: { //send your form values here 
      }, 
      dataType: "json", 
      success: function (data) { 
       if (data.IsSuccess) { 

        //Update the partial view. 
        $("#Form2Partial").html(data.ViewHtml); 

        //Have to call this to make client side validation work after dynamically adding a form. 
        $.validator.unobtrusive.parse('#Form2'); 

        //Add event handler for submit. 
        $("#Form2").bind("submit", Form2SubmitHandler); 
       } 
       else { 

        //Update the partial view. 
        $("#Form2Partial").html(data.ViewHtml); 


        //Have to call this to make client side validation work after dynamically adding a form. 
        $.validator.unobtrusive.parse('#Form2); 

        //Add event handler for submit. 
        $("#Form2").bind("submit", Form2SubmitHandler); 
       } 
      } 
     }); 
    } 
} 

//Submit Form3 
function Form3Ajax() { 
    if ($("#Form3").valid()) 
    { 
     $.ajax({ 
      type: 'POST', 
      url: '@Url.Action("Action3", "Controller")', 
      cache: false, 
      data: { //send your form values here 
      }, 
      dataType: "json", 
      success: function (data) { 
       if (data.IsSuccess) { 

        //Update the partial view. 
        $("#Form3Partial").html(data.ViewHtml); 

        //Have to call this to make client side validation work after dynamically adding a form. 
        $.validator.unobtrusive.parse('#Form3); 

        //Add event handler for submit. 
        $("#Form3").bind("submit", Form3SubmitHandler); 
       } 
       else { 

        //Update the partial view. 
        $("#Form3Partial").html(data.ViewHtml); 


        //Have to call this to make client side validation work after dynamically adding a form. 
        $.validator.unobtrusive.parse('#Form3); 

        //Add event handler for submit. 
        $("#Form3").bind("submit", Form3SubmitHandler); 
       } 
      } 
     }); 
    } 
} 

<div id="Form1Partial">@Html.Partial("Form1Partial", Model.model1)</div> 
<div id="Form2Partial">@Html.Partial("Form2Partial", Model.model2)</div> 
<div id="Form3Partial">@Html.Partial("Form3Partial", Model.model3)</div> 

2. Form1PartialView

@using (Html.BeginForm("Action1", "Controller", FormMethod.Post, new { @id = "Form1" })) 
{ 
    <!-Form elements go here->      
    <button type='submit'>Submit Form1</button> 
} 

3. Form2PartialView

@using (Html.BeginForm("Action2", "Controller", FormMethod.Post, new { @id = "Form2" })) 
{ 
    <!-Form elements go here->      
    <button type='submit'>Submit Form2</button> 
} 

4. Form3PartialView

@using (Html.BeginForm("Action3", "Controller", FormMethod.Post, new { @id = "Form3" })) 
{ 
    <!-Form elements go here->      
    <button type='submit'>Submit Form3</button> 
} 

5. Контроллер Код

[HttpPost] 
public ActionResult Action1(Model model) 
{ 
if (ModelState.IsValid) 
{ 
    //Do some thing 

    return Json (new { IsSuccess = true, ViewHtml = RenderPartialViewToString(ControllerContext, "Form1Partial", model) });  

} 

    // If we got this far, something failed, 
    return Json (new { IsSuccess = false, ViewHtml = RenderPartialViewToString(ControllerContext, "Form1Partial", model) }); 
} 

[HttpPost] 
public ActionResult Action2(Model model) 
{ 
if (ModelState.IsValid) 
{ 
    //Do some thing 

    return Json (new { IsSuccess = true, ViewHtml = RenderPartialViewToString(ControllerContext, "Form2Partial", model) });  

} 

    // If we got this far, something failed, 
    return Json (new { IsSuccess = false, ViewHtml = RenderPartialViewToString(ControllerContext, "Form2Partial", model) }); 
} 

[HttpPost] 
public ActionResult Action3(Model model) 
{ 
if (ModelState.IsValid) 
{ 
    //Do some thing 

    return Json (new { IsSuccess = true, ViewHtml = RenderPartialViewToString(ControllerContext, "Form3Partial", model) });  

} 

    // If we got this far, something failed, 
    return Json (new { IsSuccess = false, ViewHtml = RenderPartialViewToString(ControllerContext, "Form3Partial", model) }); 
}