Question

我正在尝试启用编辑按钮以使用Javascript，将json查询发布到我的MVC控制器以获取数据，然后使用json查询返回的数据填充表单（客户端）。我失败了。而且我不确定我是否采取了正确的方式。

我在我的视图中显示了“子类别”列表。

@foreach (var sub in Model.SubCategories)
        {
            <div class="row">
                <div class="col-sm-3">

                    @Html.ActionLink(" ", "DeleteSubCategory", "Category", new { subCategoryId = sub.Id }, new {@class="glyphicon glyphicon-remove", @title="Delete"}) 
                    <a href="#" class="glyphicon glyphicon-edit btnEditSubCategory" onclick="populateSubCategory(@sub.Id);"></a>

                    @sub.Description
                </div>

            </div>

        }

<a href是我出错的地方。我想要调用我的javascript，这是我可能会更错的地方，这应该从上面的链接获取id，转到控制器，根据id获取我需要的数据，然后填充一个编辑框。

<script type="text/javascript">

function populateSubCategory(id) {
    alert(id);
    $.ajax({
        url: '@Url.Action("EditSubCategory", "Category")',
        type: "POST",
        contentType: "application/json",
        data: JSON.stringify(id),
        cache: false,
        async: false,
        success: function (result) {
            if (result.Success == 'true') {
                document.getElementById("txtSubCategoryName").value = result.Description;
                window.location = '@Url.Action("EditCategory", "Category", new { categoryId = Model.Id })';
               } else {
                   alert(result.Message);
               }
            },
        error: function () {
            alert("Oh no...");
        }

    });
    return (false);
}

我相信我的javascript也可能不对。

有人可以协助我解决这个问题吗？

目前发生的事情是我的控制器中的值为空：

public JsonResult EditSubCategory(string subCategoryId)
{
    var result = new { Success = "true", Description = "Test Description" };
    var r = new JsonResult
    {
        Data = result
    };

    return r;
}

注意，我的控制器现在什么都不做。我只是想填充文本框。但subCategoryId始终为空。

此外，当我尝试分配值时，我得到：

JavaScript runtime error: Unable to set property 'value' of undefined or null reference

包含我要填充的编辑框的表单是：

<form class="form-horizontal well">
<div class="form-group">
    <label for="txtSubCategoryName" class="col-lg-4 control-label">Sub Category Name:</label>
    <div class="col-lg-8">
        <input type="text" class="txtSubCategoryName form-control" placeholder="The description of the Sub Category" />
    </div>
</div>
<div class="form-group">
    <label for="cmbCostCentre" class="col-lg-4 control-label">Default Cost Centre:</label>
    <div class="col-lg-8">
        <select class="form-control cmbCostCentre">
            <option value="0">None</option>
            @foreach (var cc in Model.AvailableCostCentres)
            {
                <option value="@cc.Value">@cc.Text</option>
            }
        </select>
    </div>
</div>
</form>

Answer 1

将ajax调用中的data参数更改为：

{subCategoryId :id}

Javascript调用控制器来填充Textbox

1 个答案: