Show result in same view after submit MVC

Question

I have a form with two fields which will pass values to a stored procedure. The stored procedure will return 0 or 1.

If 0 the user is not eligible to see the data. If 1, he is. Then I want to show the details in the same page which I have submitted. I am using MVC 4 razor.

Please give some idea how to achieve this. I am new to MVC.

Answer 1

You can use javascript ajax to post your from. using this you can get the data through ajax without refreshing the page and then you can use your ajax result to display the data.

HTML code

<form id="MyForm"  method="post">
<input type="text" name="value1"/>
<input type="text" name="value2"/>
<input type="submit" name="Submit" value="Submit" />
</form>

Controller code

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult MyAction(MyViewModel model)
    {
        var result = ResultOfStoredPrcedure();
        return Content(result);
    }
}

javascript code

<script >

 $(document).ready(function () {

    $('#MyForm').submit(function (e) {

        var formData = new FormData(this);

        $.ajax({
            url: '@Url.Action("MyAction", "Home")',
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: formData,
            contentType: false,
            processData: false,
            success: function (result) {
             // here in result you will get your data
            },
            error: function (result) {

            }
        });
        e.preventDefault();
    });
});
</script>

Answer 2

If you want you can utilise MVCs Ajax Helper, and use the Ajax.BeginForm(), or use javascript and a standard form to post. Whatever the choice, in your Action just return a View.

If you use the Ajax.BeginForm() you can specify an element by it's ID to update, and by returning a View you have greater control over what is returned in comparison to returning Content.

@using (Ajax.BeginForm("MyActionHome", "Home", new AjaxOptions {HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "resultArea"}))
{
    <input type="submit" name="Submit" value="Submit" /><
}

<div id="resultArea">
</div>   

This form allows you to specify the Action,Controller, Options and if you want additional arguments to send. We have also specified the TargetId that we want to update, in this case the 'resultArea'.

If you needed some clientside code to execute you could also use the OnComplete option and provide a JavaScript function.

[HttpPost]
public ActionResult PurchaseUnit()
{
    return View("_ResultPartial",);
}

Here we have a basic controller which returns a PartialView. That Partial will then be inserted into the Id specified, and will Replace, as defined by our options