ASP.NET MVC Partial View issue when Submitting a Form

Question

I am trying to display a Partial View inside a master (Index) View:

Steps:

User selects a Dropdown item from the Index View.
- This displays a Partial View that has a search Form.
User fills the search Form and then clicks the Submit button.
If the search Form is valid, a new page (Results View) is displayed.
Else, the search Form Partial View should be re displayed with errors INSIDE the master View

I'm having a problem with number 4 because when the search Form submits, it only displays
the partial View in a new window. I want to display the whole page : Index View + Partial View with errors.

Suggestions? This is what I have:

Image

enter image description here

Controller

public class AppController : Controller
{
    public ActionResult Index()
    {
        return View(new AppModel());
    }

    public ActionResult Form(string type)
    {
        if (type == "IOS")
            return PartialView("_IOSApp", new AppModel());
        else
            return PartialView("_AndroidApp", new AppModel());
    }

    public ActionResult Search(AppModel appModel)
    {
        if (ModelState.IsValid)
        {
            return View("Result");
        }
        else // This is where I need help
        {
            if (appModel.Platform == "IOS")
                return PartialView("_IOSApp", appModel);
            else
                return PartialView("_AndroidApp", appModel);
        }
    }
}

Model

public class AppModel
{
    public string Platform { get; set; }
    [Required]
    public string IOSAppName { get; set; }
    [Required]
    public string AndroidAppName { get; set; }        
    public List<SelectListItem> Options { get; set; }

    public AppModel()
    {
        Initialize();
    }

    public void Initialize()
    {
        Options = new List<SelectListItem>();

        Options.Add(new SelectListItem { Text = "IOS", Value = "I" });
        Options.Add(new SelectListItem { Text = "Android", Value = "A"});
    }
}

Index.cshtml

@{ ViewBag.Title = "App Selection"; }

<h2>App Selection</h2>

@Html.Label("Select Type:")
@Html.DropDownListFor(x => x.Platform, Model.Options)

<div id="AppForm"></div> // This is where the Partial View goes

_IOSApp.cshtml

@using (Html.BeginForm("Search", "App"))
{
    @Html.Label("App Name:")
    @Html.TextBoxFor(x => x.IOSAppName)
    <input id="btnIOS" type="submit" value="Search IOS App" />
}

AppSearch.js

$(document).ready(function () {

$("#Platform").change(function () {

    value = $("#Platform :selected").text();

    $.ajax({
        url: "/App/Form",
        data: { "type": value },
        success: function (data) {
            $("#AppForm").html(data);
        }
    })
});

});

That is what I'm using - look at my _IOSAPP.cshtml. When the form submits though, it goes to the Search action method and if the Model is not valid, it's displaying just the partial view. What I want is the whole page (Index View + Partial View with errors) — nv.snow
– nv.snow, Commented Jan 6, 2014 at 3:56
i mean use Ajax.BeginForm not Html.BeginForm,so when submit,go to search action,if valid,return a partial view with search result update to page,if not valid,return a partial view with error message update to page.the sumbit request is an ajax post request — chenZ
– chenZ, Commented Jan 6, 2014 at 5:22

Alborz · Accepted Answer · 2014-01-05 21:33:51Z

2

You need to call the search method by ajax too.

Change the index.html and then

1- if Form is valid replace the whole html or the mainContainer( The div that i have added to view).

2- else just replace the partial view.

@{ ViewBag.Title = "App Selection"; }
<div id="mainContainer">
<h2>App Selection</h2>

@Html.Label("Select Type:")
@Html.DropDownListFor(x => x.Platform, Model.Options)

<div id="AppForm"></div> // This is where the Partial View goes
</div>

Remove the form tag from your partial view just call an ajax call method for searching. May be easiest way to handle this problem is using MVC unobtrusive ajax.

edited Jan 5, 2014 at 21:33

answered Jan 5, 2014 at 20:16

Alborz

6,9333 gold badges26 silver badges37 bronze badges

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

3 Comments

nv.snow Over a year ago

This ajax is only executed when the Dropdown selection changes (it is just used to display the form) - I have no problems there. What I want is: when the Submit button is clicked -> the 'Search' action method is called. In here, how do I display the Partial View with the errors?

Alborz Over a year ago

Add a div for displaying the error message in partial view or your master and show it when error accrued in your Ajax call.

nv.snow Over a year ago

This Ajax is going to /App/Form, I need help in managing the return in /App/Search when the model is not valid.

Khalid Habib · Accepted Answer · 2016-05-06 13:15:08Z

I would say use inline Ajax to submit this form.

@using (Html.BeginForm("Search", "App"))
{
   @Html.Label("App Name:")
   @Html.TextBoxFor(x => x.IOSAppName)

   <input id="btnIOS" type="submit" value="Search IOS App" />
}

change upper given code into following code

@using (

Ajax.BeginForm(
    "Form", "App",
    new AjaxOptions()
    {
        UpdateTargetId = "App",
        HttpMethod = "Post"
    }
   ) 
 )

 {   
    <div class="editor-label">
        @Html.Label("App Name:")
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(x => x.IOSAppName)
    </div>
    <input id="btnIOS" type="submit" value="Search IOS App" />

 }

 //in controller change the parameter of the given method from string type to model object which will be posted by ajax form.
  public ActionResult Form(AppModel appModel)
  {
    if (appModel.type == "IOS")
        return PartialView("_IOSApp", new AppModel());
    else
        return PartialView("_AndroidApp", new AppModel());
  }

Collectives™ on Stack Overflow

ASP.NET MVC Partial View issue when Submitting a Form

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related