HTML.Partial() is not working when displaying it?

Question

In Asp.net mvc 5. we have a login page which implements HTML.BeginForm() to post data to controller , if the username and password are incorrect, we are sending error back to the front end using partial views. Everything work fine, In case of error only error message is displayed on the screen and nothing else.

Controller

[HttpPost]
public ActionResult SingleSSOMPLogin(SSoStateModel model)
{
    //Check the Code with SP providers and Authorization server.
      if(model.SAMLAssertion.validMPData)
      {
        return RedirectToAction("SSOServiceMP" , "SAML");
      }else
      { 
         //Error message processed.
         model.errorMessage = SSOState.SAMLAssertion.errorMessage;
         return PartialView("_LoginError" , model);
      }
}

The view contain the following Code

<div class="peripheral">
        <div class="panel panel-default panel-peripheral">
            @{Html.Partial("_LoginError", Model);}
            <div class="panel-heading clearfix">Please Log In</div>
            <div class="panel-body">
                <div class="brand-logo eop-logo">
                    <script type="text/javascript">
                        function changeImage() {
                            document.getElementById("Logo").src = '@Url.Content("~/Content/images/TopLogo.gif")';
                        }
                    </script>
                    <img id="Logo" width="200" src='@Url.Content("~/Content/images/TopLogo.gif")' onerror="changeImage()" />


                    @{ Html.EnableClientValidation(true);}

                    <!--Ajax call to Controller-->
                    @using (Html.BeginForm("SingleSSOMPLogin", "Accounts"))
                    {
                        @Html.ValidationSummary(true);

                        <div id="group-email" class="form-group col-md-12 ">
                            @Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "Please enter your Email address" })
                            @Html.ValidationMessageFor(m => m.Email)
                        </div>

                        <div id="group-password" class="form-group col-md-12">
                            @Html.PasswordFor(m => m.Password, new { @class = "form-control", placeholder = "Please enter your password" })
                            @Html.ValidationMessageFor(m => m.Password)
                        </div>

                        <div class="form-group">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary pull-left">Login</button>
                                <a id="forgot" href='@Url.Action("ForgotPassword","Accounts")' class="btn btn-link btn-sm pull-right">Forgot your password?</a>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>

Partial View

@{
    Layout = null;
}

@if (Model.Result!= null)
{
    <div class="alert alert-warning alert-dismissable">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        <strong>@Model.Result.errorMessage</strong>
    </div>
}

When Error occur, I get redirect to same view again with all query parameter gone and display only error message.

How to solve following issue?

DaniCE · Accepted Answer · 2014-05-19 10:36:51Z

1

The partial view will return only the fragment you defined. So when called from a "complete" view with

@{Html.Partial("_LoginError", Model);}

it will generate the corresponding part of the view.

In your situation what is most common is to add a model error and return the complete view (that must have a ValidationSummary section):

[HttpPost]
public ActionResult SingleSSOMPLogin(SSoStateModel model)
{
    //Check the Code with SP providers and Authorization server.
      if(model.SAMLAssertion.validMPData)
      {
        return RedirectToAction("SSOServiceMP" , "SAML");
      }else
      { 
         //Error message processed.
         ModelState.AddModelError("error", SSOState.SAMLAssertion.errorMessage);             
         return View(model);
      }
}

If you want to use the partial view you have to call it from an javacript ajax call and insert the response in your page. With jQuery it is something more or less like:

$.ajax({ url: <partial view url>,
         type: 'GET',
         success: function (result) {
           $(updateSelector).hide().html(result).effect("fade", "fast");
         }
      });

edited May 19, 2014 at 10:36

answered May 19, 2014 at 10:20

DaniCE

2,4211 gold badge20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

A.P.S Over a year ago

thanks, but when returning the view. It will also remove the query parameter, which are very important?

DaniCE Over a year ago

I'm not sure if i understand correctly your question... when you do return View(model) the view will contain all the information in the model (from url query and your form data). You don't loose anything.

DaniCE Over a year ago

I mean: next received post will contain the same model information (except for user modifications in the form, of course)

Collectives™ on Stack Overflow

HTML.Partial() is not working when displaying it?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related