通过jQuery使用ASP.NET MVC提交表单并接收值

Question

I'm working on a ASP.NET MVC project where, upon submitting a form, the model creates a new record in the database and sends back the record ID to the form (which will then be acted upon in some additional JavaScript code).

I'm using the Telerik Kendo window control, so the idea is that the user will click on the submit button in the Kendo pop-up window and will set the chain of events in motion. Once the value has been received, the Kendo pop-up window will be closed.

I have been following the example in this thread: PartialView with a form in a kendo window

This behavior works fine, as far as submitting the form. This code does not receive any value from the controller. In the view:

<input type="button" value="Create" class="btn btn-default" onclick="formSubmit()"/>

And later on...

<script>
    function formSubmit() {
    if (!inIframe()) {
        // We are a parent window
        $('form').submit();
    }
    else {
        // We are a pop-up window
        $('form').submit();
        parent.$('#window').data('kendoWindow').close();
    }
    }
</script>

@(Html.Kendo().Window()
    .Name("window")
    .Title("Attached Report")
    .Content("Loading...")
    .Actions(actions => actions.Close())
    .Iframe(true)
    .Height(700)
    .Width(1000)
    .Modal(true)
    .AutoFocus(true)
    .Visible(false)
)

In the controller:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(VMMyViewModel viewModel)
{
    // Code omitted...basically, we save to the database
    db.SaveChanges();

    if (viewModel.IsInPopupWindow)
    {
     return null; // We return null to help us exit out of the popup window.
    }
    else
    {
    return RedirectToAction("Index"); // Since we're in the main window, go back to the index after submitting.
    }
}

I want to grab the record ID of the record we just saved to the database and feed that back to the jQuery calling code somehow. I'm able to send back the actual value of the record ID in the controller, but it will be returned as a web page that features the record ID...

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(VMMyViewModel viewModel)
{
    // Code omitted...basically, we save stuff
    db.SaveChanges();

    if (viewModel.IsInPopupWindow)
    {
            return Content(reportHeader.Id.ToString());
    }
    else
    {
    return RedirectToAction("Index"); // Since we're in the main window, go back to the index after submitting.
    }
}

On the jQuery side, it appears that I shouldn't be using $('form').submit() since there isn't a way to get back data via a success/error mechanism. I have tried several other ways (viewbags, jQuery trigger, jQuery POST, the close mechanism on the Kendo window control) but so far I haven't been able to put all the pieces together.

I suspect I am going about this in entirely the wrong way. Any suggestions would be greatly appreciated!

Answer 1

In your controller return Json instead of Content such that:

if (viewModel.IsInPopupWindow)
{
        return Json(reportHeader.Id.ToString());
}

Then in your js, use $.post such that

function formSubmit() {
    if (!inIframe()) {
        // We are a parent window
        // $('form').submit();
    $.post($('form').attr("action"), $("form").serialize(), function(id){
    // you got the id

   // rest omitted ...
})

basically you are using jquery to post the form, that way you can get the result of post. However, you have to becareful when you don't return id (in you current code there is a possible redirect, whichi will not work) - perhaps return something that indicate there is a problem