asp.net-core - 部分剃须刀页面不会在 ASP .NET Core 中呈现

Question

我有一个母版页/模板页/任何你想用网站导航和标题来称呼它的东西，我想用不同的局部视图换掉页面的正文。

在母版页的代码隐藏文件中，我有：

public void OnGet(string screenSelect = "Welcome")
{
    ScreenSelect = screenSelect;
}

在cshtml我的文件中：

@switch (Model.ScreenSelect)
{
    case "Page1":
        <div>
            @await Html.PartialAsync("_Page1", Model.Page1Model)
        </div>
        break;
    case "Page2":
        <div>
            @await Html.PartialAsync("_Page2", Model.Page2Model)
        </div>
        break;
    case "Page3":
        <div>
            @await Html.PartialAsync("_Page3", Model.Page3Model)
        </div>
        break;
    case "Page4":
        <div>
            @await Html.PartialAsync("_Page4", Model.Page4Model)
        </div>
        break;
    case "Page5":
        <div>
            @await Html.PartialAsync("_Page5", Model.Page5Model)
        </div>
        break;
}

对于javascript，我有：

function navigateTo(pageName)
{
    console.log('in navigateTo');
    $.ajax({
        type: "GET",
        url: "MasterPage?screenSelect=" + pageName,
        content: "application/json; charset=utf-8",
        success: function (response)
        {
            console.log('in success');
        },
        error: function (xhr, textStatus, errorThrown)
        {
            console.log('in error');
        }
    });
}

我可以确认该navigateTo函数正在触发，并且OnGet正在使用正确的参数命中。我已经在@awaits 上设置了断点，并且可以确认@await Html.PartialAsync也命中了正确的断点。但是页面只是没有更新。

标签： asp.net-core

Answer 1

由于您是使用 JQuery Ajax 更新部分内容，所以在调用 action 方法成功后，会将结果返回给 Ajax 成功函数。因此，如果您想更新母版页中的部分视图内容，您应该在 Ajax 的 Success 函数中执行此操作。

请参考以下代码：

MasterPage.cshtml.cs：

public class MasterPageModel : PageModel
{
    [BindProperty]
    public string ScreenSelect { get; set; }

    [BindProperty]
    public string Page1Model { get; set; }
    [BindProperty]
    public string Page2Model { get; set; }
    [BindProperty]
    public string Page3Model { get; set; }
    public void OnGet(string screenSelect = "Welcome")
    {
        ScreenSelect = screenSelect;
    }
    //create a handler to load partial view.
    public IActionResult OnGetLoadPartial(string screenSelect)
    {
        var returnmodel = "";

        //initial data source.
        Page1Model = "this is Page1 Page";
        Page2Model = "This is Page2 Page";
        Page3Model = "This is Page3 Page";
        switch (screenSelect)
        {
            case "Page1":
                returnmodel = Page1Model;
                return Partial("_Page1", returnmodel);
            case "Page2":
                returnmodel = Page2Model;
                return Partial("_Page1", returnmodel);
            case "Page3":
                returnmodel = Page3Model;
                return Partial("_Page1", returnmodel);
            default:
                returnmodel = "<div><h2> Master Page </h2></div>";
                return Content(returnmodel);

        }; 
    }
}

MasterPage.cshtml

@page
@model RazorSample.Pages.MasterPageModel 
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#" onclick="navigateTo('Welcome')">Master Page</a></li>
            <li><a href="#" onclick="navigateTo('Page1')">Page 1</a></li>
            <li><a href="#" onclick="navigateTo('Page2')">Page 2</a></li>
            <li><a href="#" onclick="navigateTo('Page3')">Page 3</a></li>
        </ul>
    </div>
</nav>

<div id="container">

    @switch (Model.ScreenSelect)
    {
        case "Page1":
            <div>
                @await Html.PartialAsync("_Page1", Model.Page1Model)
            </div>
            break;
        case "Page2":
            <div>
                @await Html.PartialAsync("_Page2", Model.Page2Model)
            </div>
            break;
        case "Page3":
            <div>
                @await Html.PartialAsync("_Page3", Model.Page3Model)
            </div>
            break;
        default:
            <div>
                <h2>Master Page</h2>
            </div>
            break;
    }
</div>


@section Scripts{ 
<script>
    function navigateTo(pageName) {
        console.log('in navigateTo');
        event.preventDefault(); //prevent the default event.
        $.ajax({
            type: "Get",
            url: "MasterPage?handler=LoadPartial&screenSelect=" + pageName, 
            success: function (response) {
                console.log('in success');
                $("#container").html("");// clear the container
                $("#container").html(response); //load the partial view.

            },
            error: function (xhr, textStatus, errorThrown) {
                console.log('in error');
            }
        });
    }
</script>
}

部分视图中的代码：

@model string
@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
<h2>@Model</h2>

然后，结果如下：