asp.net-mvc-3 - ajaxを使用してコントローラーにデータを渡す

Question

以下のデータを ajax 呼び出しでコントローラーに渡す方法

Stack Trace: at ApricaCRMEvent.Controllers.HomeController.ErrorBadRequest() in E:\Aprica\ApricaSVN\Project\Internal\Aprica\CRM_New\Integrated\ApricaCRMEvent\ApricaCRMEvent\Controllers\HomeController.cs:line 46 at lambda_method(Closure , ControllerBase , Object[] ) at System.Web.Mvc.ActionMethodDispatcher.Execute(ControllerBase controller, Object[] parameters) at System.Web.Mvc.ReflectedActionDescriptor.Execute(ControllerContext controllerContext, IDictionary`2 parameters) at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethod(ControllerContext controllerContext, ActionDescriptor actionDescriptor, IDictionary`2 parameters) at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass15.b__12() at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethodFilter(IActionFilter filter, ActionExecutingContext preContext, Func`1 continuation) at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass15.<>c__DisplayClass17.b__14() at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethodWithFilters(ControllerContext controllerContext, IList`1 filters, ActionDescriptor actionDescriptor, IDictionary`2 parameters) at System.Web.Mvc.ControllerActionInvoker.InvokeAction(ControllerContext controllerContext, String actionName) at System.Web.Mvc.Controller.ExecuteCore() at System.Web.Mvc.ControllerBase.Execute(RequestContext requestContext) at System.Web.Mvc.ControllerBase.System.Web.Mvc.IController.Execute(RequestContext requestContext) at System.Web.Mvc.MvcHandler.<>c__DisplayClass6.<>c__DisplayClassb.b__5() at System.Web.Mvc.Async.AsyncResultWrapper.<>c__DisplayClass1.b__0() at System.Web.Mvc.Async.AsyncResultWrapper.<>c__DisplayClass8`1.b__7(IAsyncResult _) at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResult`1.End() at System.Web.Mvc.Async.AsyncResultWrapper.End[TResult](IAsyncResult asyncResult, Object tag) at System.Web.Mvc.Async.AsyncResultWrapper.End(IAsyncResult asyncResult, Object tag) at System.Web.Mvc.MvcHandler.<>c__DisplayClasse.b__d() at System.Web.Mvc.SecurityUtil.b__0(Action f) at System.Web.Mvc.SecurityUtil.ProcessInApplicationTrust(Action action) at System.Web.Mvc.MvcHandler.EndProcessRequest(IAsyncResult asyncResult) at System.Web.Mvc.MvcHandler.System.Web.IHttpAsyncHandler.EndProcessRequest(IAsyncResult result) at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)

このようなビューからの ajax 呼び出し

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <center>
    <h2>Sorry, An Error Occured.</h2>
    </center>
    <% if (ViewBag.username == "admin")
       { %>

       <% if (Model.Exception != null ) { %>
            <p>
              Controller: <%= Model.ControllerName %>
            </p>
            <p>
              Action: <%= Model.ActionName %>
            </p>
            <p>
              Message: <%= Model.Exception.Message%>
            </p>
            <p>
              Stack Trace: <%= Model.Exception.StackTrace%>
            </p>
        <% } %>

    <%}
       else
       { %>
        <center>
            <h3>Sorry for inconvinience caused. You can report this error to administrator.</h3>
            <br />
            <input type="button" id="postError" value="Report Error" />
        </center>
    <%} %>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#postError").click(function () {
                var vcontroller= "<%= Model.ControllerName %>";
                var vaction= "<%= Model.ActionName %>";
                var vmessage= "<%= Model.Exception.Message%>";
                var vstacktrace= "<%= Model.Exception.StackTrace%>";
                $.ajax({
                    url: '/Error/Error/',
                    type: "POST",
                    data: {
                        controller: vcontroller,
                        action: vaction,
                        message: vmessage,
                        stackTrace: vstacktrace    
                    },
                    dataType: "json",
                    success: function (data) {
                        alert(data.result);
                    },
                    error: function () {
                        alert("Some Error Occured while reporting Error.");
                    }
                });
            });
        });
    </script>
    </asp:Content>

コードに問題が発生するvar vstacktrace= "<%= Model.Exception.StackTrace%>";

at ApricaCRMEvent.Controllers.HomeController.ErrorBadRequest() in E:\Aprica\ApricaSVN\Project\Internal\Aprica\CRM_New\Integrated\ApricaCRMEvent\ApricaCRMEvent\Controllers\HomeController.cs:line 46 at lambda_method(Closure , ControllerBase , Object[] ) at System.Web.Mvc.ActionMethodDispatcher.Execute(ControllerBase controller, Object[] parameters) at System.Web.Mvc.ReflectedActionDescriptor.Execute(ControllerContext controllerContext, IDictionary`2 parameters) at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethod(ControllerContext controllerContext, ActionDescriptor actionDescriptor, IDictionary`2 parameters) at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass15.b__12() at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethodFilter(IActionFilter filter, ActionExecutingContext preContext, Func`1 continuation) at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass15.<>c__DisplayClass17.b__14() at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethodWithFilters(ControllerContext controllerContext, IList`1 filters, ActionDescriptor actionDescriptor, IDictionary`2 parameters) at System.Web.Mvc.ControllerActionInvoker.InvokeAction(ControllerContext controllerContext, String actionName) at System.Web.Mvc.Controller.ExecuteCore() at System.Web.Mvc.ControllerBase.Execute(RequestContext requestContext) at System.Web.Mvc.ControllerBase.System.Web.Mvc.IController.Execute(RequestContext requestContext) at System.Web.Mvc.MvcHandler.<>c__DisplayClass6.<>c__DisplayClassb.b__5() at System.Web.Mvc.Async.AsyncResultWrapper.<>c__DisplayClass1.b__0() at System.Web.Mvc.Async.AsyncResultWrapper.<>c__DisplayClass8`1.b__7(IAsyncResult _) at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResult`1.End() at System.Web.Mvc.Async.AsyncResultWrapper.End[TResult](IAsyncResult asyncResult, Object tag) at System.Web.Mvc.Async.AsyncResultWrapper.End(IAsyncResult asyncResult, Object tag) at System.Web.Mvc.MvcHandler.<>c__DisplayClasse.b__d() at System.Web.Mvc.SecurityUtil.b__0(Action f) at System.Web.Mvc.SecurityUtil.ProcessInApplicationTrust(Action action) at System.Web.Mvc.MvcHandler.EndProcessRequest(IAsyncResult asyncResult) at System.Web.Mvc.MvcHandler.System.Web.IHttpAsyncHandler.EndProcessRequest(IAsyncResult result) at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)

誰かがアイデアを持っているなら助けてください....

score 0 · Accepted Answer

これ#submitが送信ボタンの場合は、コールバックから false を返して、デフォルトアクションをキャンセルしてください。

<script type="text/javascript">
$(document).ready(function () {
    $('#submit').click(function () {
        $.ajax({
            url: '/Error/Error/',
            type: 'POST',
            data: { 
                sendEmail: true 
            },
            success: function (data) {
                alert(data.result);
            },
            error: function () {
                alert("Some Error Occured while reporting Error.");
            }
        });

        return false;  // <!-- this is the important bit
    });
});
</script>

これで、コントローラーアクションは次のようになります。

[HttpPost]
public ActionResult Error(bool sendEmail)
{
    ...
}

明らかに、他の情報も渡すことができます。

data: { 
    message: 'some message',
    sendEmail: true 
},

また、コントローラーアクションにもこのmessage引数を指定できます。

コードのもう 1 つの問題は、コントローラーアクションに URL をハードコーディングしたことです。

url: '/Error/Error/'

このようにルーティングを利用していないため、これは非常に悪いことです。つまり、Global.asax でルート定義のパターンを変更すると、この URL は無効になります。また、IIS の仮想ディレクトリにデプロイすると、正しい URL は「/YouAppName/Error/Error」になります。これらすべてを考慮に入れるために、次のように URL をハードコードするべきではなく、URL ヘルパーを使用してそれらを生成する必要があります。

url: '<%= Url.Action("Error", "Error") %>'

明らかに、これは JavaScript がビュー内にインラインであり、ヘルパーを使用できることを前提としています。それが別のjavascriptファイルにある場合（明らかに正しいアプローチです）、URLをDOMの一部として保存するためにHTML5 data-*属性を使用できますが、ヘルパーで生成されます。

たとえば、これ#submitが DOM の div であるとします。

<div id="submit">
    Click me to submit
</div>

data-urlそれに属性を追加できます：

<div id="submit" data-url="<%= Url.Action("Error", "Error") %>">
    Click me to submit
</div>

そして今、別のjsファイルでこの属性を使用できます：

$('#submit').click(function () {
    $.ajax({
        url: $(this).data('url'),
        ...

一方、これ#submitがフォームの送信ボタンである場合はaction、対応するフォームのを使用します。この場合、送信ボタンの .click イベントを購読するのではなく、フォームの .submit イベントを購読します。

$(document).ready(function () {
    $('#your_form_id').submit(function () {
        $.ajax({
            url: this.action,
            type: this.method,
            data: { 
                sendEmail: true 
            },
            success: function (data) {
                alert(data.result);
            },
            error: function () {
                alert("Some Error Occured while reporting Error.");
            }
        });

        return false;  // <!-- this is the important bit
    });
});

アップデート：

一部のモデルプロパティを javascript 変数に安全にシリアル化するには、JSON シリアライザーを使用する必要があります。

var vstacktrace = <%= new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model.Exception.StackTrace) %>

asp.net-mvc-3 - ajaxを使用してコントローラーにデータを渡す

1 に答える 1

Related

Reference