有一排按钮，每个按钮在 div 中加载一个局部视图

Question

免责声明：我刚开始编写实际代码，所以我可能缺少一些明显的东西

所以，我在一个页面中有四个按钮。它们下面是一个空的 div，我希望每个按钮在按下时将不同的局部视图加载到 div 中。

我已经尝试了谷歌搜索“让按钮在单击时呈现部分视图”的所有结果，但没有结果

这是我的索引

@{
    ViewBag.Title = "FnB";
}

<div class="row ">
    <div class="col-md-3">
        <button type="button" id="addStudentBTN" class="btn btn-success btn-lg">Προσθηκη Μαθητη</button>
    </div>
    <div class="col-md-3">
        <button type="button" id="searchIdBTN" class="btn btn-primary btn-lg ">Αναζητηση βαση ID</button>
    </div>
    <div class="col-md-3">
        <button type="button" id="searchClassBTN" class="btn btn-info btn-lg " data->Αναζητηση βαση Τμηματος</button>
    </div>
    <div class="col-md-3">
        <button type="button" id="deleteStudentBTN" class="btn btn-danger btn-lg ">Διαγραφη Μαθητη</button>
    </div>
</div>
<div id="partialBox">
</div>
@section scripts{
    <script src="~/Scripts/addBTN.js"></script>
}

这是部分

@model AkmiFnBCRM.Models.StudentModel




@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.StudentID, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.StudentID, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.StudentID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Classroom, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Classroom, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Classroom, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Spesilization, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Spesilization, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Spesilization, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Προσθήκη" class="btn btn-default" />
            </div>
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

这是控制器

public ActionResult AddStudent()
        {
            return PartialView("AddStudent");
        }

最后这是我尝试的最后一个脚本

$(document).ready(function () {
    $("#addStudentBTN").click(function () {
        $('#partialBox').load("/FnB/AddStudent");
    });
});

问题是，无论我尝试什么，点击都不会被注册（在 .click() 之前和之后尝试过警报），即使 .load 在 .ready 中也没有任何反应

编辑 按钮名称有点f**ky，修复了它们和脚本，但它仍然无法加载。

Answer 1

两件事：

1. 按钮中的 ID 拼写错误。
2. DocumentReady 看起来有点不对劲。

我对此进行了测试，它确实有效。

<div>
        <button type="button" id="addStudentBTN" class="btn btn-success btn-lg"> Try me</button>
        <div id="test">
        Hooray
        </div>
    </div>

使用此脚本：

$(document).ready(function () {

    $('#addStudentBTN').click(function () {
        $("#test").toggle('hidden');
    });
})

这是我试过的小提琴：jsfiddle.net/wmn76h45/3

希望对你有帮助。

更新：

通过后端获取部分内容的 Ajax 调用示例：

$.ajax({  
            type: "POST",  
            url: '@Url.Action("addStudent")',  
            data: '{stuff: 'someStuff'}',  
            dataType: "json",  
            contentType: "application/json; charset=utf-8",  
            success: function (result) {    
                $('#myPartial').html(result); 
            },  
            error: function () {  
                alert("Nope");  
            }  
        });  

然后你可以像往常一样使用一个 Action-Method 来传递你的 Partial。