1

私は MVC 4 を使用しており、ポスト リクエストを送信しようとしていますが、結果のビューが HTML 形式でコントローラーから正常に返されますが、その時点でどうすればよいかわかりません。

JS

$("form").submit(function (e) {
    e.preventDefault();
    if ($(this).valid()) {
        $.ajax({
            url: submitUrl, type: "POST", traditional: true,
            data: { EventName: 'Name of event'},
            success: function(data){
                $("#content").html(data);
            }
        })
    }
});

私のコントローラー

[HttpPost]
public ActionResult CreateEvent(EventModel model)
{
    if(ModelState.IsValid)
    {
        return RedirectToAction("Index");
    }
    else
    {
        return View(model);
    }
}

したがって、コントローラーが View または RedirectToAction を返すことがわかります。私の ajax 呼び出しの成功コールバックでは、次のことを行っています: $("#content").html(data); しかし、何も起こらないようです。誰かがコントローラーアクションのリターンを適切に処理する正しい方向に私を押し込むのを手伝ってくれますか?

どうもありがとう！

4

1 に答える 1

4

私の理解が正しければ、あなたのページには Create Event フォームがあり、AJAX リクエストを送信して新しいイベントを作成したいと考えています。#content次に、ページ内のセクションをアクションの結果に置き換えますCreateEvent。

AJAX が正しく設定されているようでCreateEvent、成功した応答が返されます。あなたは今、反応について混乱していると思います。いくつかのオプションがありますが、2 つ選択しましょう。

JSON レスポンス

[HttpPost]
public ActionResult CreateEvent(EventModel model)
{
    if(ModelState.IsValid)
    {
        var event = service.CreateEvent(model); // however you create an event
        return Json(event);
    }
    else
    {
        // model is not valid so return to original form
        return View("Index", model);
    }
    ...

ここで、JSON から html マークアップを生成し、それを に挿入する必要があります#content。

$.ajax({
    url: submitUrl, type: "POST", traditional: true,
    data: { EventName: 'Name of event'},
    success: function(data){
        var obj = JSON.Parse(data);
        var html; // build html with the obj containing server result
        $("#content").html(html);
    }
})

またはHTML フラグメント

Layout定義済みの完全なページを返す代わりに、タグPartialViewなしLayoutとすべてのheadandscriptタグのみを返します。

[HttpPost]
public ActionResult CreateEvent(EventModel model)
{
    if(ModelState.IsValid)
    {
        var event = service.CreateEvent(model); // however you create an event
        return PartialView("CreateEventResult", event);
    }
    else
    {
        // model is not valid so return to original form
        return View("Index", model);
    }
}

ここで、新しい部分ビューCreateEventResult.cshtml (Razor)を作成します。

@model Namespace.EventModelResult
@ {
    Layout = null;
}
<div>
    <!-- this stuff inserted into #content -->
    @Model.Date
    ...
</div>

そしてjavascriptは変更されていません

$.ajax({
    url: submitUrl, type: "POST", traditional: true,
    data: { EventName: 'Name of event'},
    success: function(data){
        $("#content").html(data);
    }
})

編集: 入力を検証した後、イベントの作成が何らかの理由で失敗した場合は、どのように応答するかを決定する必要があります。1 つのオプションは、返されるオブジェクトに応答ステータスを追加し、新しく作成されたイベントの代わりにそれを表示することです。

于 2013-03-30T03:31:32.537 に答える