Question

I have a jquery modal dialog that displays a partial view. The partial view contains a form which posts back to see if the entered value is valid. What I want is the error message that I return in the controller to be displayed on the partial view without refreshing the page. How do I do this ajaxically?

Partial View:

    @model SimpleSalon.Data.Models.GiftCard

    @using (Html.BeginForm("AddGiftCard", "Sales", FormMethod.Post, new { @class="addGiftCardForm" }))
    {
        @Html.ValidationSummary("Correct the errors below:")

        <table>
            <tr>
                <td>Card Number</td>
                <td>@Html.TextBoxFor(x => x.CardNumber)</td>
            </tr>
            <tr>
                <td>Amount</td>
                <td>@Html.TextBoxFor(x => x.InitialBalance)</td>
            </tr>
        </table>
    }

Controller:

    [HttpPost]
    public ActionResult AddGiftCard(GiftCard model)
    {
        if (ModelState.IsValid)
        {
            //if it's valid in the db continue on
            //else ModelState.AddModelError("", "card number not valid.")
        }

        return View(model);
    }

Thanks in advance!

Answer 1

You could use an Ajax.BeginForm instead of Html.BeginForm:

@using (Ajax.BeginForm("AddGiftCard", "Sales", null, new AjaxOptions { UpdateTargetId = "container" }, new { @class="addGiftCardForm" }))
{
    ...
}

Notice that I have used UpdateTargetId = "container" in the AjaxOptions. This means that the partial result returned by the AddGiftCard action will be injected into a DOM element with id="container". So make sure you put such element to wrap the partial in the jQuery dialog.

Also for this to work make sure you have referenced the jquery.unobtrusive-ajax.js script to your page:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>