[RESOLVED]show error in modal dialog without any reload page and display json result in view

Hi dear ,

I want show error after submit in modal dialog without any load page.

cshtml :

   <td>
                    <a href="#@item.IntellectualPropertyID" data-toggle="modal" class="ShowModal"  data-id="@item.IntellectualPropertyID" data-value="@item.Title"   onclick="SetModalID()" >
                  <img src="~/images/icon/add.png" alt="register" title="register" />
                 </a>
                </td>

<script>


    $(".ShowModal").click(function () {
        var id = $(this).data('id');
        $('.modal').attr('id', id);
        $('#IntellectualPropertyID').val(id);

    });
</script>

<div class="modal" id="mngIP">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> <img src="~/images/icon/delete2.png" /> </button>
                <h4 class="modal-title">registratioin</h4>

            </div>
            <div id="Error">
                @using (Html.BeginForm())
                {
                    @Html.ValidationSummary()

                }
            </div>
                    <div class="modal-body">
      

@using (Ajax.BeginForm("Register", "IntellectualProperty", new AjaxOptions { UpdateTargetId = "Error", InsertionMode = InsertionMode.Replace, OnSuccess = "OnSuccess" }))
            {

                    @Html.AntiForgeryToken()
           

                    <fieldset>
                        <legend>

                        </legend>

                        @Html.HiddenFor(model => model.RegistrantID)

                        @Html.HiddenFor(model => model.IntellectualPropertyID)
                        @Html.FormFieldFor(model => model.RealName)
                        @Html.FormFieldFor(model => model.LegalName)
                        @Html.FormFieldFor(model => model.Phone)
                        @Html.FormFieldFor(model => model.Mobile)

                    </fieldset>

                    <div>
                        <input type="submit" title="send" value="send" id="Add-Register" />
                    </div>
                }

            </div>
       
        </div>

    </div>
</div>

and Register action :

       [HttpPost]
     //  [ValidateAntiForgeryToken]
        public  ActionResult Register(Registrant registrant  )
        {

            if (ModelState.IsValid)
            {
 
                        db.Registrants.AddOrUpdate(registrant);
                        db.SaveChanges();
                       return Json(new { success = true ,messsage="registeration with successfully."});
                }

            _message = string.Join(Environment.NewLine, ModelState.Values
                                        .SelectMany(x => x.Errors)
                                        .Select(x => x.ErrorMessage));

            return Json(new { success = false, message = _message});

        }

    }

how can display error in modal dialog .

There are lot of options for opening modal dialog. One simple way is to use jQuery: http://jqueryui.com/dialog/ 

Hi nazlin,

For this requirement, you could do it in OnSuccess function.

Please refer to this code below:

@using (Ajax.BeginForm("Register", "IntellectualProperty", new AjaxOptions { UpdateTargetId = "Error", InsertionMode = InsertionMode.Replace, OnSuccess = "OnSuccess(data)" }))
function OnSuccess(data)
{
   if(data.success=="false")
    {
        $("#error").val(data.message);
    }
    else
    {
        
    }
}

Best Regards

Starain

Leave a Reply