jquery - 如何将 "lnkclass"值从部分 View 传递到 mvc 应用程序中的存储过程？

Question

我已经创建了父 View 和部分 View 。我正在进行 ajax 调用(使用 $.load() 函数)来调用我的 RacesName()方法来获取与 data-raceid 关联的值属性是我的按钮。然后我想更新 @ViewBag.Name 生成的文本具有该值。

我收到以下错误

GET http://localhost:53987/Races/RacesName?id=103646584 500 (Internal Server Error)

型号

public class clsStakes
{
    public string Date { get; set; }
    public int? RaceId { get; set; }
    public string Race { get; set; }
}

Controller

[HttpGet]
public ActionResult Stakes(ClsStakes clsStakes)
{       
    return View(clsStakes);//return parent view
}   

public ActionResult RacesName(ClsStakes clsStakes, int? id)
{
    RacesDetails racesDetails = new RacesDetails();
    ViewBag.Name = racesDetails.RaceName(id);
     return View(clsStakes); // I think this part is creating problem.
}

父 View

<div class="container">
     @ViewBag.Name            
     <div id="mypartial"></div>      
</div>

部分 View (这是使用正在运行的单独的 ajax 调用在主视图的 <div id="mypartial"> 元素中呈现的)

<table class="table">
    <tr>
        <th>@Html.DisplayNameFor(m => m.Date)</th>
        <th>@Html.DisplayNameFor(m => m.Race)</th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>@Html.DisplayFor(modelItem => item.Date)</td>
            <td>
                <button class="linkClass" type="button" data-raceid="@item.RaceId">@Html.DisplayFor(modelItem => item.Race)</button>                   
            </td>                         
        </tr>
    }
</table>

获取raceid的脚本

$('#mypartial').on('click', '.linkClass', function () {
    var race = $(this).data("raceid");
    var raceid = '@Url.Action("RacesName", "Stakes")?id=' + race;
    $(this).load(raceid);
});

最后，获取比赛名称的过程

public string RaceName(int? Id)
{
    SqlParameter[] prms = new SqlParameter[1];
    string sSQL;
    var RaceName = "";
    sSQL = "exec StakesRacesGetRaceDetails @Id";
    prms[0] = new SqlParameter("@Id", SqlDbType.Int);
    prms[0].Value = Id;
    ds = clsUtilities.CreateCommandwithParams(sSQL, prms);
    DataTable dataTable = ds.Tables[0];          
    if(dataTable.Rows.Count>0)
    {
        DataRow row = dataTable.Rows[0];
        RaceName = Convert.ToString(row["race_header"]);
    }
    return RaceName;
}

Answer 1

500(内部服务器错误) 表示您的 Controller 方法正在抛出异常。您可以使用浏览器工具(“网络”选项卡)检查 ajax 调用的结果，该结果将显示异常的详细信息。在这种情况下，正如评论中所指出的，您没有名为 RacesName.cshtml

的 View

一种选择是创建一个名为(例如)_RacesName.cshtml 的部分 View ，其中仅包含

@ViewBag.Name

然后 Controller 方法将是

public ActionResult RacesName(int? id)
{
    RacesDetails racesDetails = new RacesDetails();
    ViewBag.Name = racesDetails.RaceName(id);
    return PartialView("_RacesName");
}

并将主视图修改为

<div class="container">
     <div id="racename">@ViewBag.Name</div> // add container element        
     <div id="mypartial"> </div>      
</div>

和脚本

$('#mypartial').on('click', '.linkClass', function () {
    var race = $(this).data("raceid");
    var url = '@Url.Action("RacesName", "Stakes")?id=' + race;
    $('#racename').load(url);
});

或者，您可以只返回 JsonResult 并更新 DOM。 修改 Controller 为

public ActionResult RacesName(int? id)
{
    RacesDetails racesDetails = new RacesDetails();
    string raceName = racesDetails.RaceName(id);
    return JsonResult(raceName, JsonRequestBehavior.AllowGet);
}

脚本

$('#mypartial').on('click', '.linkClass', function () {
    var race = $(this).data("raceid");
    var url = '@Url.Action("RacesName", "Stakes")';
    $.getJSON(url, { id: race }, function(response) {
        $('#racename').text(response);
    });
});