通过JavaScript从View访问Post方法

时间:2013-09-11 11:54:12

标签: javascript asp.net-mvc-4 post

我遇到从我的视图访问ActionResult [Post]的问题。

查看:

@using (Html.BeginForm()){
<form id="edit-order-form" action="@Href("~/Orders/Edit")">///EDIT:
   ....

  <div class="row">
            <span class="label"><label for="ShipPostalCode">PostalCode:</label></span>
            <input type="text" id="txtShipPostalCode" name="ShipPostalCode" value="@ViewBag.ShipPostalCode" />
        </div>
        <div class="row">
            <span class="label">&nbsp;</span>
            <input type="submit" id="btnSave" name="submit" value="Save" />
        </div>
        </fieldset>
    </form>

<script type="text/javascript">

$("#btnSave").live("click", saveRecord);

function saveRecord() {

$.ajax(
 { type: "Post" ,
     url: '@Url.Action("Save", "OrdersList")',
     data: {
    OrderID: $("#hdnOrderID").val(),
    ShipName: $("#txtShipName").val(),
    ShipAddress: $("#ShipAddress").val(),
    RequiredDate: $("#RequiredDate").val(),
    ShipPostalCode: $("#ShipPostalCode").val(),
         },
         dataType: "html" ,
         success: function  (data){
             alert ('saved');
              }
     }).....

控制器:

        [HttpPost]
    //[ValidateAntiForgeryToken]
    public ActionResult Save(int orderId = 0, string ShipName = "", string ShipAddress = "", string ShipPostalCode = "", DateTime? RequiredDate = null)
    {
        SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString);

        using (SqlCommand cmd = new SqlCommand("GetOrders", conn))
        {
            conn.Open();
            //SqlCommand cmd = new SqlCommand( "GetOrders", "connection string");

            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@ID", orderId);
            cmd.Parameters.AddWithValue("@ShipName", ShipName);
            cmd.Parameters.AddWithValue("@ShipAddress", ShipAddress);
            SqlParameter paramDate = cmd.Parameters.Add("@RequiredDate",
            System.Data.SqlDbType.DateTime);
            paramDate.Value = RequiredDate;
            //cmd.Parameters.AddWithValue("@RequiredDate", RequiredDate);
            cmd.Parameters.AddWithValue("@ShipPostalCode", ShipPostalCode);

            //SqlParameter Total = cmd.Parameters.Add("@Total", SqlDbType.Int);
            //Total.Direction = ParameterDirection.Output;
            cmd.ExecuteNonQuery();



            conn.Close();


            return View();
        }
    }

不会调用控制器操作。可能javascript功能也没有。

2 个答案:

答案 0 :(得分:0)

您是否尝试过使用document.forms[0].submit();?要查看发布或您的javascript是否存在问题?

此外,.live已被弃用,您应该使用.on。

示例代码:

$("#btnSave").on("click", saveRecord);

//or $("#btnSave").click( function(){
//    document.forms[0].submit();
//});

function saveRecord() {
    document.forms[0].submit();
 })

并将保存操作结果的属性更改为[HttpPost]且低于[ActionName("Edit")]

答案 1 :(得分:0)

首先,您需要做的是将'btnSave'输入元素的'type'属性更改为'button',以便在单击时不会发布页面。具有“提交”类型的“输入”元素实际上会发布页面,当您想要在单击按钮时执行javascript时,这不是您想要的。

接下来你需要做的就是使用IE或Chrome并启动开发者工具'F12'。在Chrome中,点击“来源”标签,然后点击“元素”标签下方的“框内箭头”打开“导航器”。找到包含javascript和断点的文件,该行具有以下语法$.ajax(。然后转到您的页面并单击“提交”按钮。从那里,你应该看到最有可能导致你的javascript失败的异常。

此外,您可能需要打开“Fiddler”并观察您的RESTful服务的“发布”是否正在开始。