Как передать значение "lnkclass" из частичного представления в хранимую процедуру в приложении mvc?

Question

Я создал родительский и частичный вид. Я делаю ajax-вызов (используя функцию $.load()), чтобы вызвать мой метод RacesName(), чтобы получить значение, связанное с атрибутом data-raceid моих кнопок. Затем я хочу обновить текст, сгенерированный @ViewBag.Name этим значением.

Я получаю следующую ошибку

GET http://localhost:53987/Races/RacesName?id=103646584 500 (внутренний Ошибка сервера)

Модель

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

Контроллер

[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.
}

Родительский вид

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

Частичное представление (отображается в элементе <div id="mypartial"> основного представления с использованием отдельного работающего вызова ajax)

<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>

Скрипт для получения расы

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

Наконец, процедура получения racename

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

A 500 (Internal Server Error) означает, что ваш метод контроллера вызывает и исключение. Вы можете использовать инструменты браузера (вкладка «Сеть»), чтобы проверить результат вашего вызова ajax, который покажет детали исключения. В этом случае, как указано в комментариях, у вас нет представления с именем RacesName.cshtml

Один из вариантов - создать частичное представление с именем (скажем) _RacesName.cshtml, которое содержит только

@ViewBag.Name

и тогда метод контроллера будет

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. Измените контроллер на

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);
    });
});