Core 2 Razor 页面 - AJAX 和部分视图

Question

我有一个 Core 2 MVC 网络应用程序，我正在尝试向其中添加一些 Ajax。

我有一个加载标准 Web 表单的创建视图。与我目前所拥有的 learned/done 有点不同的是，我想向页面添加一些半动态内容。

页面的 ViewModel 是一堆简单的属性，但其中一部分也是嵌套集合。

我正在尝试通过模态将值动态添加到嵌套集合中，然后重新加载局部视图以反映我添加的内容而不导致页面重新加载 - 我只想重新加载局部视图并关闭模态.

我可以看到 JS 正在处理请求并触发对控制器的调用并获得 200 响应，但它没有关闭模式或使用来自模式的数据重新加载部分视图。

有些事情我绝对不会在这里。谁能给点建议？

ViewModel

public class RaceViewModel
    {
        public Race RaceData { get; set; }
        public ObservableCollection<CurrencyDetails> Currencies { get; set; }
        public CurrencyDetails BaseCurrency { get; set; }
        public CurrencyDetails RaceCurrency { get; set; }
        public ObservableCollection<RaceOptions> RaceOptionData { get; set; }
        [DisplayFormat(DataFormatString = "{0:0.00")]
        public decimal BaseFee { get; set; }
    }

主视图（省略无关部分）

    @using TechsportiseOnline.Helpers
    @model TechsportiseOnline.ViewModels.RaceViewModel

    @{
        ViewData["Title"] = "Create";
    }

    <h2>Create a new race</h2>

    <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="optionsmodal">
        <div class="modal-dialog modal-lg">

            <div class="modal-content">
                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h2 class="modal-title">New Race Option</h2>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label value="Name" class="control-label">Option Name</label>
                                <br /><small class="text-muted">The name of this Race Option</small>
                                <input name="Name" placeholder="Your 10k" type="text" class="form-control" aria-label="Name">
                                @*<span asp-validation-for="RaceData.Name" class="text-danger"></span>*@
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label name="RaceDistance" value="Race Distance" class="control-label">Distance</label>
                                <br /><small class="text-muted">Choose a race distance, used for Age Grading </small>

                                <select name="RaceDistance" class="form-control">
                                    <option value="" selected>--select--</option>
                                    <option value="M1">1 mile</option>
                                    <option value="KM5">5 km</option>
                                    <option value="KM6">6 km</option>
                                    <option value="M4">4 miles</option>
                                    <option value="KM8">8 km</option>
                                    <option value="M5">5 miles</option>
                                    <option value="KM10">10 km</option>
                                    <option value="KM12">12 km</option>
                                    <option value="KM15">15 km</option>
                                    <option value="M10">10 miles</option>
                                    <option value="KM20">20 km</option>
                                    <option value="Half">Half Marathon</option>
                                    <option value="KM25">25 km</option>
                                    <option value="KM30">30 km</option>
                                    <option value="Marathon">Marathon</option>
                                    <option value="KM50">50 km</option>
                                    <option value="M50">50 miles</option>
                                    <option value="KM100">100 km</option>
                                    <option value="KM150">150 km</option>
                                    <option value="M100">100 miles</option>
                                    <option value="KM200">200 km</option>
                                    <option value="Other">Other</option>
                                </select><br />
                                @*<span asp-validation-for="RaceData.RaceDistance" class="text-danger"></span>*@
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label name="MaxEntries" value="Maximum Entries" class="control-label">Maximum Entries</label>
                                <br /><small class="text-muted">The maximum capacity of the race</small>


                                <input name="MaxEntries" class="form-control" />
                                @*<span asp-validation-for="RaceData.MaxEntries" class="text-danger"></span>*@
                            </div>
                        </div>
                    </div>

                    <div class="row">         
                        <div class="col-md-4">
                            <div class="form-group">
                                <label name="Start Time" value="Start Time" class="control-label">Race Start Time</label>
                                <br /><small class="text-muted">Start time in HH:MM</small>
                                <input name="Start Time" value="19:00" asp-format="{0:hh:mm}" class="form-control" type="time" />
                                @*<span asp-validation-for="RaceData.RaceStartTime" class="text-danger"></span>*@
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label value="Entry Price" class="control-label">Entry Price</label>
                                <br /><small class="text-muted">The price of the normal race entry</small>
                                <input name="Entry Price" type="text" class="form-control" aria-label="Amount" placeholder="10.00" asp-format="{0:0.00}">
                                @*<span asp-validation-for="RaceData.EntryPrice" class="text-danger"></span>*@
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">Affiliation Discount</label>
                                <br /><small class="text-muted">Value of discount for being an affiliated runner</small>
                                <input name="AffiliatedDiscountValue" type="text" class="form-control" aria-label="Amount" value="2.00" asp-format="{0:0.00}">
                                @*<span asp-validation-for="AffiliatedDiscountValue" class="text-danger"></span>*@
                            </div>
                        </div>               
                    </div>






                    </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary" id="addoption" >Add</button>
                        </div>
                    </div>
                </div>
    </div>









    <form asp-action="Create" enctype="multipart/form-data">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <div class="panel panel-default">
                        <div class="panel-heading">Race Options</div>
                        <div class="panel-body">
                            <div id="container">
                                Create your different Race Options here, if you want to have more than one distance/race in the same event. You must have at least 1 Race Option.
                                <div id="dvRaceOptionsResults">
                                    @{Html.RenderPartial("RaceOptions", Model);}
                                </div>
                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Add Race Option</button>
                            </div>
                        </div>
                    </div>


                </div>

                    </div>
                </div>
            </div>

        </div>
        <div class="form-group">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </form>






    <div>
        <a asp-action="Index">Back to List</a>
    </div>

    @section Scripts {
        @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
        <script type="text/javascript">
            $("#addoption").click(function(){
            $.ajax({
                url: '@Url.Action("GetRaceOptions", "Races")',
                type: 'POST',
                success: function(data) {
                    if (data) {  // check if data is defined
                        $("#dvRaceOptionsResults").html(data);
                    }
            }
        });
    });
        </script>

    }

局部视图

    @model TechsportiseOnline.ViewModels.RaceViewModel
    <table>
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            @if (Model.RaceOptionData != null)
            {
                foreach (var option in Model.RaceOptionData)
                {
                <tr>
                    <td>@option.Name</td>
                </tr>
                }
            }
        </tbody>
    </table>

控制器方法

[HttpPost]
public async Task<IActionResult> GetRaceOptions(RaceViewModel race)
   {
       var viewModel = race;
       return PartialView("RaceOptions", viewModel);
   }

Answer 1

您在调用 ajax 时没有使用 data: 参数。所以你没有将数据发布到你的控制器。比控制器试图 return 具有空 viewModel 的局部视图。如果你想保存新添加的选项，你需要做这样的事情。

创建数据对象并将其作为数据参数发送到 ajax。

修改控制器以保存新选项和return旧+新选项

[HttpPost]
public async Task<IActionResult> GetRaceOptions(RaceViewModel race)
{
   //save options from RaceViewModel

   //get old options + newly added options

   var viewModel = old + newly added data
   return PartialView("RaceOptions", viewModel);
}

您需要在ajax

的成功部分关闭模态

success: function(data) {
                if (data) {  // check if data is defined
                    $("#dvRaceOptionsResults").html(data);
                    $('#modalId').modal('hide');
                }

Answer 2

这是你的 VideModel 对吗？

public class RaceViewModel
    {
        ...
    }

据我了解，您的 AJAX 请求被路由到接收 RaceViewModel 参数的方法 GetRaceOptions。不幸的是，您的 AJAX POST 请求没有发送所需的 RaceViewModel 对象。您必须在 data body.

中传递它

确保您的 JS data object 与 ViewModel 具有相同的属性名称，以便模型绑定正常工作。

示例：

 data: {BaseFee: 842350, property2: 'abc'}; //and so on
     $.ajax({
          url: '@Url.Action("GetRaceOptions", "Races")',
          type: 'POST',
          data: data,
          dataType : 'html', //expect html back
          success: function(data) {
              if (data) {  // check if data is defined
                   $("#dvRaceOptionsResults").html(data);
              }
     }

Core 2 Razor 页面 - AJAX 和部分视图

Core 2 Razor Page - AJAX and Partial Views

c#

ajax

model-view-controller

asp.net-core-2.0