1

お問い合わせフォームの後にメッセージを投稿しようとしています。ユーザーが送信ボタンをクリックした後にメッセージが送信されたことを示しています。別のページにリダイレクトしたり、HTTP Post アクション メソッド内で別のビューを返したりしたくありません。ASP.NET MVC フレームワークでそのようなことを行うにはどうすればよいですか?

以下は私のコードサンプルです：

@*contactus.cshtml*@
            @model MySite.Models.ContactModel
            @using (Html.BeginForm())
            {
                <div class="col-md-6">
                    <div class="form-group">
                        @Html.TextBoxFor(model => model.Name})
                        <p>@Html.ValidationMessageFor(model => model.Name)</p>
                    </div>
                    <div class="form-group">
                        @Html.TextBoxFor(model => model.Email)
                        <p>@Html.ValidationMessageFor(model => model.Email)</p>
                    </div>
                    <div class="form-group">
                        @Html.TextAreaFor(model => model.Message)
                        <p>@Html.ValidationMessageFor(model => model.Message)</p>
                    </div>

                    <div class="col-lg-12">
                        <button type="submit">Send Message</button>
                    </div>
                </div>
            }

@*ContactModel.cs*@
public class ContactModel
{
    [Required(ErrorMessage = "* Please enter your name.")]
    [StringLength(100, MinimumLength=3, ErrorMessage="* Please enter your full name.")]
    public string Name { get; set; }

    [Required]
    [EmailAddress(ErrorMessage="* Not a valid email address.")]
    public string Email { get; set; }

    [Required]
    public string Message { get; set; }
}

現在、ホーム/インデックス ページに問い合わせフォームしかなく、他のページにリダイレクトしたくありません。ボタンのすぐ下にメッセージを表示したいのSend Messageですが、以下のアクションメソッドを使用してそれを行う方法がわかりません。

@*HomeController.cs*@
    public ActionResult Index(ContactModel model)
    {
        if (ModelState.IsValid)
        {
            // this is my helper library, for brevity, I'm not copying it.
            EmailHelper emailService = new EmailHelper(); 
            bool success = emailService.SendEmail(model.Name, model.Email, model.Message);
            return Content(success ? "success" : "no...something went wrong :(");
        } else {
            return View(model);
        }
    }

現在、このコントローラーは内部の文字列を返し、Contentページ全体を置き換えます。この文字列を連絡先フォームの下に返したいと思います。また、同じ html ページに 2 つ目のお問い合わせフォームを含む 2 つのセクションがあり、View(model) を返すと、最初のセクションに自動的にリダイレクトされますが、これは理想的ではありません...コントローラーにどのように指示しますか? POST メソッドの後の 2 番目のセクションにのみリダイレクトしますか? さらに、ページ全体を返さない方が効率的だと思います...メッセージ文字列のみをdivに返す方法はありますか?

4

2 に答える 2

0

フォームが正常に送信された場合にのみ成功メッセージを表示するには、コントローラーの POST アクションで ViewBag に値を設定し、同じページを引き続き表示したい場合は同じページを返すことをお勧めします。次に、View 自体に If ステートメントを配置して、ViewBag 変数に値が含まれているかどうかをテストし、含まれている場合はメッセージを表示できます。

コントローラ：

[HttpPost]
public ActionResult YourAction(YourModel m)
{
    //Do stuff to send the contact form
    ...
    if(error)
    {
        ViewBag.Message = "There was a problem sending the form.";
    }
    else
    {
        ViewBag.Message = "The form was sent successfully!";
    }
    return View(m);
}

意見：

@if(ViewBag.Message != null)
{
    <div>@ViewBag.Message</div>
}

これにより、ユーザーに結果を伝える前にフォームがサーバーに正常に投稿されたかどうかを確認でき、ViewBag.Message が設定されている場合にのみメッセージが表示されます。ViewBag 変数は好きなだけ持つことができ、好きな名前を付けることができます...どの場所でどの変数を使用するかを覚えておいてください。

編集：

コメントに従って、これは AJAX 呼び出しを使用して行うこともできます。簡単にするために、jQuery .post() メソッドを使用します。

スクリプト内:

<script>
    $(document).on('click', "#buttonId", function() {
        var nameText = $("#IdOfNameField").val();
        var emailText = $("#IdOfEmailField").val();
        var messageText = $("#IdOfMessageField").val();
        $.post('@Url.Content("~/Controller/AJAXPostContactForm")',//the url to post to
            {name: nameText, email: emailText, message: messageText }, //these are values to be sent to the action
            function(){ //this is the success function
                $("#successMessage").val("Form posted successfully.");
            }
        )
        .fail(function() {//failure function
            alert("Something went wrong.");
        });
    }
</script>

コントローラ：

public void AJAXPostContactForm(string name, string email, string message)
{
    try
    {
        //do stuff with the information passed into the action
    }
    catch(exception e)
    {
        //Handle errors. If error thrown, Ajax should hit fail block in script
    }
    finally
    {
        //do any cleanup actions
    }
}

意見：

<div id="successMessage"></div>

私はこのコードをテストしていませんが、理論的には動作するはずです。特定のボタンがクリックされると、フォーム フィールドから値を取得し、それらの値をコントローラーの特殊な ActionResult にポストして、何が起こったかについてのメッセージを返します。

于 2015-06-23T16:52:17.310 に答える