单击按钮时如何从jqgrid的弹出窗口传递？

Question

I use mvc4. There is button in rows of jqgrid. when clicked button, open pop up and in pop up edit data of row's grid. but when clicked button of pop up don't pass data to action of controller. code of pop up:

{
     name: 'Notes',
     width: 160,
     sortable: false,
     resizable: false,
     search: false,
     formatter: function () {
         return "<button onclick='OpenDialog()' style='margin-left:12px'>Pop Up Dlg</button>";
     }
 }

code of pop up ( http://jqueryui.com/dialog/#modal-form ):

<script>
    $(function() {
        var dialog, form,
        modserial = $("#ModSerial"),
            simno = $("#SimNo"),

            function addUser() {
                $(function() {
                    $.ajax({
                        url: '@Url.Action("EditMet", "MetGrid")',
                        data: "{'ModSerial':'" + document.getElementById('ModSerial').value + "', 'SimNo':'" + document.getElementById('SimNo').value + "'}",
                        type: "Post",
                        dataType: "Html",
                        success: function(result) {
                            $("#Data").html(result);
                        },
                        error: function() {
                            alert("Error!");
                        }
                    });
                });
            }

            function log() {}
        dialog = $("#dialog-form").dialog({
            autoOpen: false,
            height: 400,
            width: 350,
            modal: true,
            buttons: {
                "...": log,
                    "Confirm": addUser,
                Cancel: function() {
                    dialog.dialog("close");
                }
            },
            close: function() {
                form[0].reset();
                allFields.removeClass("ui-state-error");
            }
        });
        form = dialog.find("form").on("submit", function(event) {
            event.preventDefault();
            addUser();
        });
    });
</script>

When call action(@Url.Action("EditMeter", "MeterGrid")), pass null to controller. How to pass data and id's row grid to action?

Answer 1

You should use contentType: "application/json;charset=utf-8" and stringify the JSON data like follwoing.

$.ajax({
     url: '@Url.Action("EditMet", "MetGrid")',
     data: JSON.stringify({"ModSerial": document.getElementById('ModSerial').value, "SimNo": document.getElementById('SimNo').value}),
     type: "post",
     contentType: "application/json;charset=utf-8",
     dataType: "Html",
     success: function(result) {
               $("#Data").html(result);
     },
     error: function() {
               alert("Error!");
     }
 });

Hope it will work now.