Core 2 Razor Page - AJAX и частичные представления - PullRequest
Новая
       0

Core 2 Razor Page - AJAX и частичные представления

0 голосов
/ 04 февраля 2019

У меня есть веб-приложение Core 2 MVC, в которое я пытаюсь добавить Ajax.

У меня есть представление Create, которое загружает стандартную веб-форму.Что немного отличается от того, что я изучил / сделал до сих пор, так это то, что я хотел бы добавить на страницу немного полудинамического контента.

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);
   }

Ответы [ 2 ]

0 голосов
/ 04 февраля 2019

Это ваш VideModel верно? 

public class RaceViewModel
    {
        ...
    }

Насколько я понимаю, ваш AJAX-запрос перенаправляется на метод GetRaceOptions, который получает параметр RaceViewModel.К сожалению, ваш запрос 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);
              }
     }
0 голосов
/ 04 февраля 2019

Вы вызываете ajax без параметра data:.Таким образом, вы не публикуете данные на свой контроллер.Затем контроллер пытается вернуть частичное представление с пустым viewModel.Если вы хотите сохранить вновь добавленные опции, вам нужно сделать что-то вроде этого.

  1. создать объект данных и отправить его в качестве параметра данных в ajax.

  2. изменить контроллер, чтобы сохранить новые опции и вернуть старые + новые опции 

    [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');
                }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...