How to pass model from partialView to javascript in asp.net mvc

Question

I wanna pass down model from partialView to javascript and process it in controller, now the problem is i couldn't pass the model where when i run the code it show null. can anyone help me on this?

*HTML code

@model List<TPMS.Models.Draft_SingleValue>
<div class="row">
    <div class="col-lg-12">
        <table class="table table-bordered">
            <thead>

                <tr class="bg-gray">

                    <th>Keyword</th>
                    <th>Default Value <span class="pull-right"><i class="fa fa-edit"></i></span></th>

                    <th><span class="pull-right"><i></i></span></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var sdata in Model.OrderBy(i => i.Keyword))
                {
                    <tr id="@sdata.DraftSingleValue_ID">

                        <td id="sv:@sdata.DraftSingleValue_ID:Keyword" contenteditable="false">@sdata.Keyword</td>

                        <td id="sv:@sdata.DraftSingleValue_ID:Default_Value" contenteditable="false"> @sdata.Default_Value</td>

                        <td id="sv:@sdata.DraftSingleValue_ID" contenteditable="false" class="">
                            <span class="btn-group center-block" id="PlusButton">
                                <a class="btn btn-success btn-xs" href="javascript:AddKeyword('@sdata');"  data-id="@sdata"><i class="fa fa-plus"></i> </a>
                            </span>
                        </td>  

                    </tr>
                }
            </tbody>
            <tfoot>
                <tr class="bg-gray">

                    <th>Keyword</th>
                    <th>Default_Value <span class="pull-right"><i class="fa fa-edit"></i></span></th>

                    <th><span class="pull-right"><i></i></span></th>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

*Javascript

 function AddKeyword(SvModel) {

            debugger
            //var model = $('#Testing').attr('data-id');

            $.ajax({
                url: "@Url.Action("AddSingleValue", "Draft")",
                cache: false,
                type: "GET",
                datatype: 'html',
                data: {"Model": SvModel },

                success: function (data) {

                    $('#List_Keyword').modal('hide');
                    $("#List_SVKeywords").html(data);
                    $('#List_Keyword').modal('show');

                },
                error: function () {
                    alert('Failed to retrieve values.');
                    document.getElementById("del_err_span_dialog").innerHTML = "Fatal Error, Please try again.";
                }
            });


        }

*Controller

 public ActionResult AddSingleValue(Draft_SingleValue Model)
        {

            Draft_SingleValue svmodel = new Draft_SingleValue();

            svmodel.Draft_File_ID = Model.Draft_File_ID;
            svmodel.Data_Type = Model.Data_Type;
            svmodel.Group_Name = Model.Group_Name;
            svmodel.Is_Active = Model.Is_Active;
            svmodel.Keyword = Model.Keyword;
            svmodel.Max_Length = Model.Max_Length;
            svmodel.Min_Length = Model.Min_Length;
            svmodel.Modified_By = User.Identity.Name;
            svmodel.Modified_On = DateTime.Now;
            svmodel.Remarks = Model.Remarks;
            svmodel.Default_Value = Model.Default_Value;

                _temporaryrepo.Insert_TemporarySingleValue(svmodel);


            return ListSv(svmodel.Draft_File_ID);

            //return new EmptyResult();
        }

As you guys can c from above code, im trying to pass model to AddKeyword function but i cant. it will be great if anyone can show me a way to do this.

Answer 1

Try this:

View:

@using (Html.BeginForm("YourActionMethod", "YourController", FormMethod.Post,
    new { id = "frmCreate", enctype = "multipart/form-data" }))
{       
    //code omitted for brevity
}

<script>
    $(function () {
        $('form').submit(function (event) {
            event.preventDefault();
            var formdata = new FormData($('#frmCreate').get(0));
         
            $.ajax({
                type: "POST",
                url: '@Url.Action("YourActionMethod", "YourController")',
                data: formdata, //! your model data
                dataType: "json",
                success: function (response) {
                    if (response.success) {
                        //success
                    }
                    else {
                        //error
                    }
                }
            });
        });
    });
</script> 

Controller:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult YourActionMethod([Bind(Exclude = null)] Model viewModel)
{
    //...
    return Json(new { success = true, message = "Success!.." }, 
        JsonRequestBehavior.AllowGet);
}