Post to Controller action method from click within JS dialog box

Question

I have a JS Dialog Box within my view. When the view is returned the dialog box is maximized/open. The view also has a link and when users click on the link this dialog box opens.

I have a button within the dialog called Submit. What I am trying to do is when the modal box is open, the rest of the page elements should be blurred or disbaled. When they click on the submit button within the dialog box, it should post with the Model properties to a controller action method. I am not really good at JS syntax but how would I post back to the controller action called "Create" with a submit value of "Confirmation" within submit click?

@model RunLog.Domain.Entities.RunLogEntry
@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";

}

@using (Html.BeginForm("Create", "RunLogEntry", FormMethod.Post, new { id = "form", enctype = "multipart/form-data" }))
    {
        @Html.ValidationSummary(true)
        <div class="exception">@(ViewBag.ErrorMessage)</div>

        //xyz elements here

            <div class="bodyContent">
        <span class="leftContent">
            @Html.Label("Run Dates")
        </span><span class="rightContent"><span id="RunDatesChildDialogLink" class="treeViewLink">
            Click here to Select Run Dates</span>
            <br />
            <span id="RunDatesDisplayy"></span></span>
    </div>

    <div id="runDatestreeview" title="Dialog Title" style="font-size: 10px; font-weight: normal;
        overflow: scroll; width: 800px; height: 450px; display: none;">
        <table class="grid" style="width: 600px; margin: 3px 3px 3px 3px;">
            <thead>
                <tr>
                    <th>
                        Run Dates:
                    </th>
                </tr>
            </thead>
            <tbody>
                    @Html.EditorFor(x => x.RunDatesDisplay)
            </tbody>
        </table>
    </div>
}

JS File For DialogBox(runDates.js):

var RunDialog;
$(document).ready(function () {

    RunDialog = $("#runDatestreeview").dialog({ resizable: false, autoopen: false, height: 140, modal: true, width: 630, height: 400,
        buttons: { "Submit": function () {
            $(this).dialog("close");
        },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });

    $('#RunDatesChildDialogLink').click(function () {
        RunDialog.dialog('open');
        $("#runDatestreeview").parent().appendTo("form");
    });

    $("#runDatestreeview").parent().appendTo("form");
});

Controller Action:

[HttpPost]
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Create(RunLogEntry runLogEntry, String ServiceRequest, string Hour, string Minute, string AMPM,
                                     string submit, IEnumerable<HttpPostedFileBase> file, String AssayPerformanceIssues1, List<string> Replicates)
        {




**EDIT:**


var RunDialog;

$(document).ready(function () {

    RunDialog = $("#runDatestreeview").dialog({ resizable: false, autoopen: false, height: 140, modal: true, width: 630, height: 400,
        buttons: { "Continue": function () {
            var str = $("#form").serialize();

            $.ajax({
                url: "/RunLogEntry/Create",
                data: str,
                cache: false,
                type: 'POST',
                dataType: 'json',
                contentType: "application/json;charset=utf-8",
                success: function (data, status) {
                },
                error: function (xhr, ajaxOptions, thrownError) { alert('error') }
            });

        },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });

    $('#RunDatesChildDialogLink').click(function () {
        RunDialog.dialog('open');
        $("#runDatestreeview").parent().appendTo("form");
    });

    $("#runDatestreeview").parent().appendTo("form");
});

Answer 1

Sample To show How you can Post Data to the controller Method

Razor Code:

<div id="form">
        <table width="600">
            <tr>
                <td>Select Date:</td>
                <td>
                    <input class="txtDate" type="date" size="20"></td>
            </tr>
            <tr>
                <td>Select Expense Type:</td>
                <td>
                    <select class="ExpenseType">
                        <optgroup label="Room">
                            <option>Room Fare</option>
                        </optgroup>

                        <optgroup label="Mess">
                            <option>Monthly Mess</option>
                        </optgroup>

                        <optgroup label="Others">
                            <option>Bus Fare</option>
                            <option>Tapari</option>
                            <option>Mobile Recharge</option>
                            <option>Auto</option>
                        </optgroup>
                    </select></td>
            </tr>
            <tr>
                <td>Enter Cost:</td>
                <td>
                    <input  class="cost" type="text" size="45" /></td>
            </tr>
            <tr>
                <td>Extra Details:</td>
                <td>
                    <input class="extra" type="text" size="45" /></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>
                    <button href="javascript:void(0);" onClick="saveExpense();" >Submit</button></td>
            </tr>
        </table>
    </div>

JQuery Code:

   <script>
function saveExpense()
    {
        var expenseobject = {
            date:$('.txtDate').val() ,
            type:$('.ExpenseType').val() ,
            cost: $('.cost').val(),
            extra:$('.extra').val()

        };

        $.ajax({
            url: './saveexpense',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ obj: expenseobject }),
            success: function (result) {
                handleData(result);

            }
        });

    }
</script>

Controller:

 public ActionResult SaveExpense(Expense obj)
        {
            obj.ExpenseId = Guid.NewGuid();
            if (ModelState.IsValid)
            {
                context.expenses.Add(obj);
                context.SaveChanges();
                int total=context.expenses.Sum(x => x.cost);
                return Json(new {spent=total,status="Saved" });

            }
            else
                return Json(new { status="Error"});   
        }

Hope this will get you through now...

Answer 2

I just did a simple post and used form.serialize rather than manually setting every model property. Short and simple

$.post("/RunLogEntry/Create", $("#form").serialize(), function (json) {
            // handle response
        }, "json");