how to bind a MVC model with ajax call?

Question

I want to bind an MVC model with ajax call and want to call a JS function using onclick event in partial view but there is an error bulkconfirm() is not defined as well as how I can bind the model with ajax call basically this is my partial view in which when user click confirm button then this click bulkconfrim() function should be called? Thanks

@model Manual_Tag_Entry.ViewModel.ModelAccessor



<div class="modal-header">
    <h3 class="modal-title" id="exampleModalLabel">Do you want to update following information?</h3>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<form id="test">
    <table class="table table-striped table-bordered" width="80%">
        <thead>
            <tr>
                <th>Tag Name</th>
                <th>Tag Old Value</th>
                <th>Tag New Value</th>
            </tr>
        </thead>
        <tbody>

            @if (Model.updatedDatas != null)
            {
                foreach (var item in Model.updatedDatas)
                {
                    <tr>
                        <td>
                            @item.TagName
                        </td>
                        <td>
                            @item.OldTagValue
                        </td>
                        <td>
                            @item.NewTagValue
                        </td>
                    </tr>
                }
            }


        </tbody>
    </table>
</form>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary" onclick="BulkConfirm()">Confirm Update</button>
</div>


@section script{
    <script>
    function BulkConfirm()
    {
        debugger;
        var data=@Model.updatedDatas;
    $.ajax({
    type: 'POST', //GET
    url: '@Url.Action("BulkUpdateConfirmation", "Home")',
    data: data
    });
    $("#myModal").modal('hide')
    }
    </script>
}

A. Nadjar · Answer 1 · 2019-12-30T09:57:37.790

1

You need to convert your view model into a Javascript object, using Html Helpers:

var obj = @Html.Raw(Json.Encode(Model));

Here you can see the exact solution: https://stackoverflow.com/a/16361388/4687359

edited Dec 30 '19 at 09:57

answered Dec 30 '19 at 09:40

A. Nadjar

2,440
2
19
20

score 0 · Answer 2 · answered Dec 30 '19 at 19:25

To add onto A. Nadjar's answer, in your view, change the for each loop in your view to a for loop and use the HTML Helpers DisplayFor and the HiddenFor for each property in your list.

for (var i = 0; i < Model.updatedDatas.Count; i++)
{
    <tr>
         <td>
              @Html.DisplayFor(modelitem => modelitem.updatedDatas[i].TagName)
              @Html.HiddenFor(modelitem => modelitem.updatedDatas[i].TagName)
         </td>
    </tr>
}

how to bind a MVC model with ajax call?

2 Answers2