0

I am trying to post data using jquery ajax to mvc action. But the problem is that whenever I am trying to serialize this form (which is a partial view), the Id which I have provided in html attributes of the form is not being recognised by jquery.This is the code : 

@using(Ajax.BeginForm("AddMaterials" , "Bom" ,null, new AjaxOptions {   
HttpMethod = "POST" }  , new { @id = "ajaxBomMaterials" }))

And this is the code for serialize : 

var data = $("#ajaxBomMaterials").serialize();

If I use "form" instead then it shows the serialzed data of the whole form(Main form as well as the partial view form) whereas I just need data for the partial form only. As I am totally new to ASP.Net and MVC, I have been searching for the last 2 days but still I havn't found the answer.

Here is the serialized data :

__RequestVerificationToken=67iIFQEtEOgXTrApYDPuoTC7EvLs0cXYOgzdFrnUwUQpPac5NsxOgo6q-YM5Q3qH9Votloa1sYrzahLoYuKLLetghrk8pNt9s2Y80KVobl41&BomId=0&ItemId=1&BomName=&ItemName=item+1001&Quantity=0&IsActive=false&IsDefault=false&WithOperations=false&CurrencyId=1&__RequestVerificationToken=FXc2NYDlDaNwuqOnZQNIYOonE8_8qk61xaxM5M92cOSz938KA5CRzAvBUSlP_HnM1g4iozC56r1Kh6VLXMex6l97SY3dxNhGQfv2oeOVHTM1&BomId=0&BomMaterialId=0&ItemId=5&Items.SellingRate=33&Rate=452&Amount=14916&Scrap=12

I just want this :

__RequestVerificationToken=FXc2NYDlDaNwuqOnZQNIYOonE8_8qk61xaxM5M92cOSz938KA5CRzAvBUSlP_HnM1g4iozC56r1Kh6VLXMex6l97SY3dxNhGQfv2oeOVHTM1&BomId=0&BomMaterialId=0&ItemId=5&Items.SellingRate=33&Rate=452&Amount=14916&Scrap=12

If anything else required then I will provide.

This is the main form in which I have called the partial view. For brevity I have cut it short.

@model ERPFynWeb.Infrastructure.ViewModels.BomViewModel
....
@Scripts.Render("~/bundles/jquery")

@using(Html.BeginForm("SaveBom" , "Bom",new {@id="BomForm"}))
{    
    @Html.AntiForgeryToken()
    @Html.HiddenFor(m => m.BomId)

    @Html.LabelFor(m => m.ItemId)     
    @Html.DropDownListFor(m => m.ItemId , new SelectList(Model.Items , "ItemId", "ItemCode") , "Select item code" , new { @id = "ddlItem" , @class = "form-control" })                                                
    @Html.ValidationMessageFor(m => m.ItemId)

    <div id="addMaterials" style="border: 1px solid lightgray; margin-bottom: 20px; padding-bottom: 5px;">                                
        @Html.Partial("_MaterialsPartialForm",Model.BommaterialsViewModel)
    </div>
    <button type="submit" value="submit" class="btn btn-primary" >Save</button>
}

This is the partial-view full code :

@model ERPFynWeb.Infrastructure.ViewModels.BomMaterialsViewModel

@using(Ajax.BeginForm("AddMaterials" , "Bom" ,null, 
    new AjaxOptions { HttpMethod = "POST" }  , new { @id = "ajaxBomMaterials" }))
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(m => m.BomId)
    @Html.HiddenFor(m => m.BomMaterialId)

    @Html.LabelFor(m => m.ItemId)
    @Html.DropDownListFor(m => m.ItemId , new SelectList(Model.ItemsList , "ItemId" , "ItemCode") , "Select item" , new { @id = "itemDdl" , @class = "form-control" })
    @Html.ValidationMessageFor(m => m.ItemId)

    @Html.LabelFor(m => m.Quantity)
    @Html.TextBoxFor(m => m.Items.SellingRate , new { @id = "qtyBox" , @class = "form-control" })

    .... // more inputs
    <button onclick="AddMaterialAjax();" type="button">Save it</button>
}

And this is the jquery which I am using on partial view.

function AddMaterialAjax() {
    var data = $("#ajaxBomMaterials").serialize();
    $.ajax({
        url: "@Url.Action("AddMaterials","Bom")",
        type: "POST",
        data: data,
        success: function () {
            alert("Materials added");
        },
        error: function () {
            alert("Materials cannot be added");
        }
    });
}

That's all.

VID
  • 13
  • 1
  • 6
  • 1
    What do you mean _Main form as well as the partial view form_? How are your forms related? Do you have invalid nested forms? Show the structure of your html. –  Feb 11 '17 at 04:23
  • 2
    You [can't nest forms](http://stackoverflow.com/a/379622/304683) – EdSF Feb 11 '17 at 05:51
  • 1
    Nested forms are invalid html. What are you actually trying to do here? What is the purpose of your 2 forms? –  Feb 11 '17 at 05:55
  • Your also have `Ajax.BeginForm`, but no submit button, and you just post it using `$.ajax()` so the `Ajax.BeginForm` is pointless anyway. And you have 2 inputs for `ItemId` which is generating invalid html and will cause problems with validation and model binding. –  Feb 11 '17 at 06:03
  • The purpose of the ajax partial view is that a user can add multiple records while staying in the current form without refreshing. And for two ItemId's one is selected only once while other is used to select the items and add multiple records against each item. Third, know nothing about nested forms. – VID Feb 11 '17 at 06:20
  • @StephenMuecke Submit button is there on the partial view at the bottom. If i use type="submit" then it fires the parent form's button. – VID Feb 11 '17 at 06:22
  • No, that is `type="button` (not `type="submit"`). So if the inner nested form (which need to change) is for creating a new record, what is the outer form for? And this really makes no sense, since nowhere are you even showing the 'new' items in the view that have been added –  Feb 11 '17 at 06:25
  • @StephenMuecke My client requirement is that while staying on the main page of BOM(Bill of Materials), he wants to add new BOM as well as multiple Material records under the new BOM. So, to add multiple records I thought of calling partial view and save records in some temporary table and when he saves new BOM then I will fetch those records and put them into the target table. – VID Feb 11 '17 at 06:35
  • Definitely not the way to go. Refer [this answer](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) for some options (I suggest you use `BeginCollectionItem`). You have a `BillOfMaterialsViewModel` that contains a `List` and you dynamically add/remove items to the collection and save all in one action. –  Feb 11 '17 at 06:39
  • Refer also [this answer](http://stackoverflow.com/questions/40539321/a-partial-view-passing-a-collection-using-the-html-begincollectionitem-helper/40541892#40541892) for a more complete example of using `BeginCollectionItem` –  Feb 11 '17 at 06:44

0 Answers0