CODEWITHSUNDEEP
javascriptjqueryasp.net-mvctwitter-bootstrappartial-views
Diego
Diego

Reputation: 2372

MVC Bootstrap Partial View ValidationMessageFor execute on loading Page

Im am doing an MVC, Bootstrap App.

I open a Bootstrap Partial View from Jquery passing Model as Parameter.

From Controller I return Partial View and I open it from Jquery.

The Problem I found, is that ValidationMessageFor is executed when Partial View is loaded... I can not find why.

The process is like this... I have an Image that called a JavaScript function...

img id="btnEmail" src="~/Content/Images/Email.png" onclick="btnEmail('param1',Param2)"

Here is My Jquery

  function btnEmail(nick, user_id) {
       --validate if user is logged and call function that call Partial View
        if (SearchLogin())
            SendMail();
    }

 function SendMail() {

            user_id = $('#CommentUser_id').val();
            nick = $('#LblCommentName').val();
            if (user_id == $('#User_id').val())
                return;

            var model = { Object_id: $("#Upload_id").val(), Nick: nick, UserDestination_id: $("#User_id").val(), Parent_id: null, UserOrigin_id: user_id};
            $.ajax(
                      {
                          type: "POST",
                          url: '@Url.Action("Email", "Contact")',
                          data: model,
                          success: function (result) {
                              $("#myModalContact").html(result).modal({ backdrop: "static" });
                          },
                         
                      });
            "static" });
        }

Here is my 

Controller Method


 public async Task<ActionResult> Email(ContactModel model)
        {
            return PartialView("_Contact", model);
        }

And Here is my Partial View

If I called my Partial View like this

<div class="modal fade" id="myModalContact" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        @Html.Partial("~/Views/Contact/_Contact.cshtml", new TableAvivaVoz.Models.ContactModel() { Object_id = Model.upload.Upload_id, Nick = Model.upload.Nick, UserDestination_id = Model.upload.User_id, Parent_id = null,UserOrigin_id=Model.User_id });
    </div>

it Works fine...

here is part of My Partial View

@model  TableAvivaVoz.Models.ContactModel
@{
    AjaxOptions ajaxOpts = new AjaxOptions
    {
        InsertionMode = InsertionMode.Replace,
        HttpMethod = "POST",
        OnSuccess = "sucessContact",
    };
}
@using (Ajax.BeginForm("XXX", "Contact", ajaxOpts))
{
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">
                   
                </h4>
            </div>
            <div class="myPartialContact">
                <div class="alert alert-success hidden">
                </div>
            </div>
            @Html.AntiForgeryToken()
           
            <div style="padding-bottom:220px">
                <div class="modal-body">
                    <div class="col-md-10">
                        @Html.TextAreaFor(model => model.Description, 10, 80, new { @class = "txtDescQ", placeholder = "Ingresa un mensaje", @rows = 8, onclick = "OcultarRecomend();" })
                        @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
                <div class="myPartialContactBtn modal-footer">
                    <button type="button" class="btn btn-default visible btnOk" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary visible btnOk" id="btnSave">Enviar</button>

                </div>

            </div><!-- /.modal-content -->
    </div><!-- /.modal -->
}

Any ideas what is wrong?

Upvotes: 0

Views: 279

Answers (1)

User3250
User3250

Reputation: 3421

You get errors on load because you are passing a erroneous Model to the action Email(ContactModel model). When you ajax post, the Model binder validates the model and adds errors to the model state.

To fix this do as below:

public async Task<ActionResult> Email(ContactModel model)
{
     ModelState.Clear();    
     return PartialView("_Contact", model);
}

Let me know if it helps.

Upvotes: 1

Related Questions