Как передать объект с формой Ajax MVC в контроллер

Question

Привет У меня есть следующий Razor View:

@model AgonConFF.ViewModels.ClaimModel 

@using (Ajax.BeginForm("DataCaptureNew", "Home", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "result", OnBegin = "onBegin()", OnComplete = "onComplate()" })) 
{ 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 

    @Html.EditorFor(model => model.Origin.SourceName, new { htmlAttributes = new { @class = "form-control CapInput", placeholder = "Source Name" } }) 
    @Html.ValidationMessageFor(model => model.Origin.SourceName, "", new { @class = "text-danger" }) 
    @*Source Name*@ 

    @Html.EditorFor(model => model.Origin.MailFax, new { htmlAttributes = new { @class = "form-control CapInput", placeholder = "Mail Address/Fax Nr" } }) 
    @Html.ValidationMessageFor(model => model.Origin.MailFax, "", new { @class = "text-danger" }) 
    @*Mail Address/Fax Nr*@ 

    <input type="submit" value="Capture" class="btn btn-default" /> 
} 

мой JS выглядит следующим образом:

function onBegin() { 
    $('#loading').show(); 
} 

function onComplate() { 
    $('#loading').hide(); 
} 

и мой контроллер выглядит следующим образом:

//Action method that handles the testCreate form submission 
[HttpPost] 
[ValidateAntiForgeryToken] 
public PartialViewResult DataCaptureNew(ClaimModel origin) 
{ 
    if (ModelState.IsValid) 
    { 
     db.Origins.Add(origin.Origin); 
     origin.Origin.OriginID = 1; 
     db.SaveChanges(); 
     return PartialView("testPartial", origin); 
    } 

    return PartialView("testPartial", origin); 
} 

Когда я представить свою форму и проверить внутри контроллера с точкой перерыва я вижу, чтоСоответствующий объектимеет значение null и дает мне ошибку. Это сообщение отлично работает, когда я просто использую Html.BeginForm. В этом случае объект Origin проходит через штраф. Как передать этот объект с помощью Ajax.BeginForm?

Answer 1

У меня было очень похожее требование, и я поделюсь тем, что сработало для меня в этом случае. В основном я использовал Form data serialization. Также я использовал Html.BeginForm, поэтому я соответствующим образом изменяю приведенный выше код.

Этап 1 Присвойте идентификатор вашей форме. Я использовал "claim_form" .Add кнопку и дать идентификатор, который, как well.I используется id="click" ниже

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "claim_form" })) 
{ 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 

    @Html.EditorFor(model => model.Origin.SourceName, new { htmlAttributes = new { @class = "form-control CapInput", placeholder = "Source Name" } }) 
    @Html.ValidationMessageFor(model => model.Origin.SourceName, "", new { @class = "text-danger" }) 


    @Html.EditorFor(model => model.Origin.MailFax, new { htmlAttributes = new { @class = "form-control CapInput", placeholder = "Mail Address/Fax Nr" } }) 
    @Html.ValidationMessageFor(model => model.Origin.MailFax, "", new { @class = "text-danger" }) 


    <input type="submit" value="Capture" class="btn btn-default" /> 
    <input type="button" id="click" class="btn btn-default" /> 
} 

Шаг 2: Ajax Call-

$('#click').click(function(e) { 


       //Say your controller is ClaimController 
       var url = '@Url.Action("DataCaptureNew","ClaimController")'; 

       $.ajax({ 
        type: 'POST', 
        url: url, 
        data:$("#claim_form").serialize(), 

        //no need to give the content -type here 
        success: function(data) { 

        }, 
        error: function(xhr, ajaxOptions, thrownError) { 

        } 

       }); 

      }); 

Шаг 3: Изменить ваш контроллер для привязки к модели

[HttpPost] 
    public JsonResult DataCaptureNew(FormCollection col) 
    { 

     //Model Binding usimg TryUpdateModel 
     var testClaim = new ClaimModel(); 
     var tstVal = TryUpdateModel<ClaimModel>(testClaim ,col); 
     //namespace for ClaimModel here say it is AgonConFF.ViewModels.ClaimModel 
     var claim1 = Type.GetType("AgonConFF.ViewModels.ClaimModel"); 
     //While debugging you will b eable to see how claim2 gets updated with the fields from formCollection 
     var claim2= Activator.CreateInstance(claim1); 

     var binder = Binders.GetBinder(claim1); 

     var bindingContext = new ModelBindingContext() 
     { 
       ModelMetadata = ModelMetadataProviders.Current.GetMetadataForType(() => claim2, claim1), 
       ModelState = ModelState, 
       ValueProvider = col 
     }; 

     binder.BindModel(ControllerContext, bindingContext); 
     if (ModelState.IsValid) 
     { 
       System.Diagnostics.Debug.WriteLine("Model is valid here"); 
     } 


     return Json(claim2); 

    } 

Примечание: претензия2 должна иметь требуемую модель. Я возвращаю результат Json из метода. Вы можете получить результат Json и отобразить его в частичном представлении.