Wie verwende ich einen Controller Aktion regenerieren Sie das Modell ohne navigation?

Habe ich ein MVC-5-website zeigt, dass log-Datei-Einträge in einem raster und stellt eine Suchfunktion zur Verfügung. Ich habe sowohl die Suche nach Kriterien und raster.mvc grid auf der Index-Seite. Wenn der Benutzer die Suchkriterien ein und klickt auf den submit-button möchte ich die ProcessLogEntries-Methode (unten) um das Modell zu aktualisieren, und aktualisieren Sie den Index.cshtml-Seite nicht navigieren Sie zu einer nicht-existenten ProcessLogEntries Seite!

Im Grunde genommen, ich möchte diese Anwendung verhält sich wie ein Single-Page-Anwendung...

Wie richte ich den HomeController.ProcessLogEntries () - Methode, dies zu erreichen?

public class HomeController : Controller
{
    public LogsResearchViewModel ViewModel  { get; set; }

    public HomeController()
    {
        ViewModel = new LogsResearchViewModel();
    }

    public ActionResult Index()
    {
        ViewBag.Message = "";
        return View(ViewModel);
    }

    [HttpPost]
    public ActionResult ProcessLogEntries(string txtSearchFor, string txtDateStart, string txtDateStop, string txtSource)
    {
        ViewBag.Message = "";

        string searchFor = txtSearchFor.ToString();
        DateTime start = DateTime.Parse(txtDateStart.ToString());
        DateTime stop = DateTime.Parse(txtDateStop.ToString());
        string source = txtSource.ToString();

        ViewModel.GetProcessLogEntries(searchFor, start, stop);
        ViewModel.GetErrorLogEntries(source, searchFor, start, stop);

        return View(ViewModel);
    }
}
Sie müssen AJAX, ausgelöst durch Schaltfläche statt eines Formulars. Dann wieder eine Teilansicht von Ihrem ProcessLogEntries Aktion. Hier ist ein Beispiel mit teilweiser Aussicht.
Man könnte auch json zurückgeben von Ihrem ProcessLogEntries handeln und konsumieren, dass ein Objekt in javascript, wenn Sie brauchen nicht viel von einer Ansicht Antwort.
Jasen, Wie würde ich ein update für das Modell mit AJAX/JSON? Ich werde Ihren link verwiesen wird; hoffentlich werde ich dort die Antwort finden... 🙂
Ich hoffe, dass ich deutlich gemacht, dass ich muss die LogsResearchViewModel ViewModel aktualisiert werden (was ich passieren können Werte in die Steuerung, so zu tun); um die Ansicht zu aktualisieren UI die datagrid. Ich weiß einfach nicht wollen, um die Seiten zu wechseln nach so... IDK, wie Sie das update ViewModel per AJAX, so IDK wie zu machen, dass der Ansatz funktioniert.

InformationsquelleAutor MilesT | 2014-09-24

  1. 6

    Wenn Sie möchten, aktualisieren Sie eine Seite, ohne Sie nachladen müssen, AJAX. Hier ist ein überblick zum Einstieg.

    Teilansicht

    Erstellen Sie eine Hauptansicht, die als "frame". Ein leeres div-Element wird als Platzhalter für das Gitter.

    <h2>Main View</h2>
<div id="grid"><!-- grid paceholder --></div>

<script>
    //ajax script here
</script>

    Erstellen Sie nun eine partielle view halten Sie den grid -

    _GridPartial

    @model LogsResearchViewModel

@Html.Grid(Model)
<button id="btnTrigger">Process</button>

    Wenn Sie möchten, können Sie einbetten diese so das erste mal Hauptansicht geladen werden Sie haben eine besiedelte grid.

    <h2>Main View</h2>
<div id="grid">@{Html.RenderAction("LoadGrid")}</div>

    Mit der Unterstützung der Aktion

    public ActionResult LoadGrid()
{
    var model = new LogsResearchViewModel() { ... };
    return PartialView("_GridPartial", model);
}

    Nun setup die AJAX-zum einfügen in die Platzhalter.

    <script>
    $("#grid").on("click", "#btnTrigger", function(e) {
        $.ajax({
            url: "/ProcessLogEntries",
            type: "post",
            data: {
                txtSearchFor: "//txtSearch.val()",
                txtDateStart: "",
                txtDateStop: "",
                txtSource: ""
            }
        })
        .done(function(result) {
            $("#grid").html(result);
        });
     });
</script>

    Und die Aktion wieder eine Teilansicht

    [HttpPost]
public ActionResult ProcessLogEntries(
    string txtSearchFor, string txtDateStart,
    string txtDateStop, string txtSource)
{
    var model = new LogsResearchViewModel();
    //...
    return PartialView("_GridPartial", model);
}

    Nach dem auslösen der post das Teilergebnis ersetzt das raster div-Inhalt.

    JSON

    Wenn Ihr grid unterstützt JSON einfach nur wieder das Modell

     [HttpPost]
 public ActionResult ProcessLogEntries(...)
 {
     var model = new LogsResearchViewModel();
     //...
     return Json(model);
 }

    Dann Griff in javascript

    ...
.done(function(jsonResult) {
    console.log(jsonResult);  //should match LogsResearchViewModel
    loadGrid(jsonResult);     //pass off to grid's javascript
});
    Schönes und einfaches 'tutorial' Mann. Ich Schloss meine partialview, aber fehlten ein paar Stücke, die ich gefunden habe in diesem 'tutorial'. Danke =)

    InformationsquelleAutor Jasen

  2. 0

    Werden Sie brauchen, um Ihr Modell. Sie können Ihre anzeigen und extrahieren per javascript das Modell aus dem Blick, oder Sie können ein JsonResult und wieder nur den serialisierten string.

    Javascript-Seite, lösen diese mit einer Taste oder der Veranstaltung von Ihrem Wunsch.

    var params = ["data","data", "data"];

$.ajax({
  type: "POST",
  url: /ProcessLogEntries,
  data: params,
  success: function(data, statusRespoonse, xhr){
   //extract your model from data or return your model via jsonresult by changing the Controller's return type.

    yourModel = data;
   },
  dataType: "json"
});

    InformationsquelleAutor celerno

Schreibe einen Kommentar