在 ASP 3.1 RazorPages AJAX 发布更新模型后，Razor 不会将值打印到屏幕上

Question

Hello I am updating a model with an AJAX call on the event of a dropdown selection. The model is updated and when I step through the below razor loop the values exist. However nothing inside the @if statement prints to the screen, not even the H2. The div is just empty... Thoughts?

@if (Model.FieldsRequiredOnStart != null)
{
    foreach (var item in Model.FieldsRequiredOnStart)
    {
        for (int i = 0; i < @item.Inputs.Count(); i++)
        {
            <h2>Fields Required on Start</h2>
            var x = @item.Inputs[i];

            <span>@x.Name</span>
            <input placeholder="@x.Name" maxlength="@x.MaxSize" type="@x.InputType"> <input />
        }
    }
}

function onSelect(e) {
        let id = $("#wfDropdown").data("kendoDropDownList").value()
        if (e.item) {    
            $('#wfDefId').val(id)
        } else {
            $('#wfDefId').val(id)
        }
            
        $.ajax({
            type: 'Post',
            url: '/CreateNewWorkflow?handler=RequiredInputs',
            beforeSend: function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },
            data: { Id: id },
            success: function () {                      
            }            
        });
    }

EDIT ON SUCCESS: I ended up using the Partial View solution. My issue was I was not sending a refreshed model when I had previously tried the partial way. The Second answer is also valid. Gotcha: If you make a partial be sure to remove the @Page reference at the top or you will get Model is null errors.

Also worth noting the C# Syntax I had to use was slightly different than what is provided in the answer to return the Partial view..

 public ActionResult OnPostRequiredInputs(int id)
        {            
             //DO STUFF 
            //Refresh Model to pass to partial
            IEnumerable<Razor.PageModels.CreateWorkflowNames> namelist = da.GetWfDefVersionNameAndIds();

            var freshModel = new CreateNewWorkflowModel(_cache, _mapper, _wlog, _workflowFactory, _configuration)
            {
                FieldsRequiredOnStart = entityDefinitionFieldsList,
                CreateWorkflowModel = namelist
            };
            
            return Partial("/Pages/_CreateNewWorkflowRequiredFieldsPartial.cshtml", freshModel);

        }

Answer 1

Assuming your CreateNewWorkflow controller action returns a model rehydrated with the new data, you should be able to set that new data in the onSuccess callback of your ajax request.

I'd do this to accomplish the result.

1. Create partial view for the razor we're gonna need to refresh.

//Filename: YourView.cshtml
<div id="partialWrapper"></div>

//File name: _YourPartialView.cshtml
@if (Model.FieldsRequiredOnStart != null)
{
    foreach (var item in Model.FieldsRequiredOnStart)
    {
        for (int i = 0; i < @item.Inputs.Count(); i++)
        {
            <h2>Fields Required on Start</h2>
            var x = @item.Inputs[i];

            <span>@x.Name</span>
            <input placeholder="@x.Name" maxlength="@x.MaxSize" type="@x.InputType"> <input />
        }
    }
}

2. Make sure your controller action returns a partial view.

public IActionResult<YourModelClass> CreateNewWorkflow(YourRequestClass request) {
   //your logic
   //...

  var rehydratedModel = new YourModelClass(); //actually fill this with data
  return PartialView(rehydratedModel);
}

3. Set the partial view result to your wrapper div in the onSuccess call back.

function onSelect(e) {
        let id = $("#wfDropdown").data("kendoDropDownList").value()
        if (e.item) {    
            $('#wfDefId').val(id)
        } else {
            $('#wfDefId').val(id)
        }
            
        $.ajax({
            type: 'Post',
            url: '/CreateNewWorkflow?handler=RequiredInputs',
            beforeSend: function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },
            data: { Id: id },
            success: function (data) {  //data represents your partial view       
              $('#partialWrapper').html(data)    //set partial view         
            }            
        });

That is a pretty typical flow of how you refresh razor pages with ajax.

Answer 2

Razor not printing Values to screen after ASP 3.1 RazorPages AJAX Post Updates Model, The div is just empty

The issue is related to the Ajax success function, according to your code, we can see that you didn't do anything to update the page with the latest data.

Generally, after getting the latest data in the success function, we could use JQuery to find the page elements and bind the latest data or populate the new page element to replace the old data. You could refer to the following sample code:

    <select id="ddl1" asp-for="CategoryId" asp-items="Model.Categories">
        <option value="">Select Category</option>
    </select>
    <h4>SubCategories</h4> 

    @if (Model.SubCategories != null)
    {
        <table >
            <tr><th>SubCategoryId</th><th>CategoryId</th><th>SubCategoryName</th></tr>
            <tbody id="tbody"> 
                @foreach (var item in Model.SubCategories)
                {
                    <tr>
                        <td>@item.SubCategoryId</td>
                        <td>@item.CategoryId</td>
                        <td>@item.SubCategoryName</td>
                    </tr>
                }
            </tbody>
        </table>
    }

Code in the cshtml.cs file:

    private ICategoryService _categoryService;
    public DDLpageModel(ICategoryService categoryService)
    {
        _categoryService = categoryService;
    }
    [BindProperty(SupportsGet = true)]
    public int CategoryId { get; set; }
    public int SubCategoryId { get; set; }
    public SelectList Categories { get; set; }

    public List<SubCategory> SubCategories { get; set; }
    public void OnGet()
    {
        Categories = new SelectList(_categoryService.GetCategories(), nameof(Category.CategoryId), nameof(Category.CategoryName));
        SubCategories = _categoryService.GetSubCategories(1).ToList();
    }
    public JsonResult OnGetSubCategories()
    { 
        return new JsonResult(_categoryService.GetSubCategories(CategoryId));
    }

Then, in the Ajax success function, find the element and set the value or dynamic add page elements with the latest data and replace the old one.

    @section scripts{ 
        <script>
            $(function () {
                $("#ddl1").on("change", function () {
                    var categoryId = $(this).val(); 
                    //method 1: using JQuery Ajax get the latest data and update the main page content
                    $.ajax({
                        url: `?handler=SubCategories&categoryId=${categoryId}`,
                        contentType: 'application/json; charset=utf-8',
                        type: 'get',
                        dataType: 'json',
                        success: function (data) {
                            $("#tbody").html("");
                            //loop through the data and append new data to the tbody
                            $.each(data, function (i, item) { 
                                $("#tbody").append("<tr><td>" + item.subCategoryId + "</td><td>" + item.categoryId + "</td><td>" + item.subCategoryName + "</td></tr>");
                            });
                        }
                    });
                });  
            });
        </script>
    }

Besides, you could also create a Partial page (for example: _SubCategories.cshtml):

    @model List<SubCategory>
    <table class="table table-striped"> 
        <tr><th>SubCategoryId</th><th>CategoryId</th><th>SubCategoryName</th></tr>
        <tbody id="tbody">
            @foreach (var item in Model)
            {
                <tr>
                    <td>@item.SubCategoryId</td>
                    <td>@item.CategoryId</td>
                    <td>@item.SubCategoryName</td>
                </tr>
            }
        </tbody>
    </table>

In the main page .cshtml.cs file, add the following handler:

    public PartialViewResult OnGetSubcategoryPartial()
    {
        var subcategories = _categoryService.GetSubCategories(CategoryId).ToList();
        return Partial("_SubCategories", subcategories);
    }

Then, using JQuery Ajax to call the above handler and load the partial page:

    <h2>Using Partial Page</h2>
    <select id="ddl2" asp-for="CategoryId" asp-items="Model.Categories">
        <option value="">Select Category</option>
    </select>
    <div id="output">
    </div>

    @section scripts{ 
        <script>
            $(function () { 
                $("#ddl2").on("change", function () {
                    var categoryId = $(this).val(); 
                    $.ajax({
                        url: `?handler=SubcategoryPartial&categoryId=${categoryId}`,
                        contentType: 'application/html; charset=utf-8',
                        type: 'get',
                        dataType: 'html',
                        success: function (result) {
                            $("#output").html("");
                            $("#output").append(result);
                        }
                    });
                }); 
            });
        </script>
    }

The screenshot like this: