ASP.NET MVC-Teilansicht Problem, wenn Sie ein Formular Einreichen

Ich versuche zu zeigen eine Teilweise Blick in einen master - (Index) - Ansicht:

Schritte:

Benutzer wählt aus einem Dropdown-Element aus der Index-Ansicht.
- Dies zeigt eine Teilansicht, die ein search-Form.
Benutzer füllt ein Suchformular aus und klickt dann auf die Schaltfläche Senden.
Wenn die such-Formular gültig ist, wird eine neue Seite (Ergebnisse Anzeigen) angezeigt werden.
Anderes, die suchen Form, Teilweise mit Sicht sollte wieder angezeigt, dass Fehler in der master-Ansicht

Ich habe ein problem mit der Nummer 4, weil, wenn der such-Formular sendet, es wird nur angezeigt,
die teilweise Ansicht in einem neuen Fenster. Ich möchte die Anzeige der ganzen Seite : Index-View + Teilansicht mit Fehler.

Vorschläge? Dies ist, was ich habe:

Bild

ASP.NET MVC-Teilansicht Problem, wenn Sie ein Formular Einreichen

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);
        }
    }
}

Modell

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);
        }
    })
});

});

warum nicht @Ajax.BeginForm(...)
Das ist, was ich verwende - Blick auf meine _IOSAPP.cshtml. Wenn das Formular abschickt, obwohl, geht es auf die Suche action-Methode, und wenn das Modell nicht gültig ist, es ist die Anzeige nur teilweise anzeigen. Was ich will, ist die ganze Seite (die Index-Ansicht + Teilansicht mit Fehler)
ich meine, die Ajax verwenden.BeginForm nicht Html.BeginForm,so, wenn senden,gehen Sie zu such-Aktion,wenn gilt,zurück eine Teilansicht mit der suchergebnis-update auf der Seite,wenn nicht gültig,zurück eine Teilansicht mit der Fehlermeldung update-Seite.füllen Sie die Anfrage ist ein ajax-post-request

InformationsquelleAutor nv.snow | 2014-01-05

1

Müssen Sie rufen Sie die search-Methode von ajax zu.

Ändern index.html und dann

1 - wenn die Form gültig ist, ersetzen Sie die html-oder die mainContainer( div, den ich eingegeben habe, um zu sehen).

2 - else-Sie ersetzen nur die Teilansicht.
```
@{ 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>
```
Entfernen Sie das form-tag aus Ihrer Teilansicht rufen ein ajax call-Methode für die Suche.
Die einfachste Art dieses problem zu behandeln, ist mit MVC unobtrusive ajax.

Dieses ajax wird nur ausgeführt, wenn die Dropdown-Auswahl ändert (es wird nur verwendet, um das Formular anzeigen) - ich habe da auch keine Probleme. Was ich möchte ist: wenn der Submit-button geklickt wird -> die 'Suche' action-Methode aufgerufen wird. Hier, wie zeige ich die Teilansicht mit dem Fehler?
Fügen Sie ein div für die Anzeige der Fehlermeldung in der teilweisen Ansicht oder Ihre master-und zeigen Sie es, wenn Fehler gesammelt Ajax-call.
Dieser Ajax ist /App/Form, ich benötige Hilfe bei der Organisation der Rückkehr im /App/Suchen, wenn das Modell nicht gilt.
Ich bearbeitet meine Antwort.

InformationsquelleAutor Alborz

Ich würde sagen, verwenden Sie inline-Ajax-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" />
}

ändern oben angegebenen code in folgenden 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());
  }

InformationsquelleAutor Khalid Habib

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.