ASP.NET Mvc3 Jquery dialog validation summary error displaying?

Question

dialog content

<div id="div_dialog_container" class="dialog_container">
@using (Html.BeginForm((string)ViewBag.FormAction, "Musteri"))
{
    <div id="div_iu_form_container" class="ui_form_container">
        <div>@Html.ValidationSummary(true, "Müşteri Kaydı Başarısız! Lütfen Bilgileri Kontrol Ediniz.")
        </div>
        <table>
            <thead>
                <tr>
                    <th colspan="2">Genel Bilgiler</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>@Html.LabelFor(x => x.musteri_no):</td>
                    <td>@Html.TextBoxFor(x => x.musteri_no)
                        @Html.ValidationMessageFor(x => x.musteri_no)</td>
                </tr>
                <tr>
                    <td>@Html.LabelFor(x => x.musteri_adi):</td>
                    <td>@Html.TextBoxFor(x => x.musteri_adi)
                        @Html.ValidationMessageFor(x => x.musteri_adi)</td>
                </tr>
                <tr>
                    <td>@Html.LabelFor(x => x.sektor):</td>
                    <td>@Html.TextBoxFor(x => x.sektor)
                        @Html.ValidationMessageFor(x => x.sektor)</td>
                </tr>
            </tbody>
            <tfoot></tfoot>
        </table>

controller

[HttpPost]
    public JsonResult JsonMusteriDuzenle(TblMusteriler musteri, string returnUrl)
    {
        if (ModelState.IsValid)
        {
            try
            {
                mus_dbo.update_musteri(musteri);
                return Json(new { success = true, redirect = returnUrl });
            }
            catch (Exception e)
            {
                ModelState.AddModelError("", "Müşteri güncelleme hatası.");
            }
        }

        return Json(new { errors = GetErrorsFromModelState() });
    }

I want to show errors buttom of textboxes. But it is shown on top like this:

How can I show each error that's own buttom of textboxes?

I want this:

Thanks.

Answer 1

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

this lines were in my masterpage, I added these line in my partial page. Then It works as I excpected.

Thanks for advices.

Answer 2

You are returning JSON in both cases from your controller action. You cannot expect any errors to show. You should return a partial view containing the form if you want errors to show:

[HttpPost]
public ActionResult JsonMusteriDuzenle(TblMusteriler musteri, string returnUrl)
{
    if (ModelState.IsValid)
    {
        try
        {
            mus_dbo.update_musteri(musteri);
            return Json(new { success = true, redirect = returnUrl });
        }
        catch (Exception e)
        {
            ModelState.AddModelError("", "Müşteri güncelleme hatası.");
        }
    }

    return PartialView("_NameOfPartialContainingTheForm", musteri);
}

and then inside your javascript code that invokes this action you must replace the contents of the div containing your form with the new partial:

success: function(result) {
    if (result.success) {
        // the controller action return JSON success
        alert('Thanks');
    } else {
        // The controller action returned a PartialView
        // So now you have to refresh the DOM if you want 
        // to see errors showing up
        $('#id_of_some_div_that_contains_the_partial').html(result);
    }  
}

This assumes that in your main view you have have a containing div:

<div id="id_of_some_div_that_contains_the_partial">
    @Html.Partial("_NameOfPartialContainingTheForm")
</div>