Html не обновляется после публикации ajax в ядре asp.net

У меня есть основное приложение asp.net. Я использую jQuery ajax для отправки данных на сервер. Когда сервер получает модель, он обновляет все свойства модели с меткой времени и возвращает частичное представление с обновленной моделью. На стороне клиента jQuery просто помещает html ответа внутри div

Ниже мой пример кода

Модельный класс

public class MyModel
{
    public string FirstName { get; set; }

    public string LastName { get; set; }

    public string City { get; set; }
}

Контроллер

public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View(new MyModel { FirstName = "Foo", LastName = "Bar", City = "Dallas" });
        }        

        public IActionResult PostData(MyModel model)
        {
            model.FirstName = model.FirstName + string.Format(" {0:ss}", DateTime.Now);
            model.LastName = model.LastName + string.Format(" {0:ss}", DateTime.Now);
            model.City = model.City + string.Format(" {0:ss}", DateTime.Now);

            return PartialView("_MyPartialView", model);
        }
    }

Просмотр индекса

@model MyModel   
<div id="mydetail">
    @Html.Partial("_MyPartialView.cshtml", Model)
</div>

_MyPartialView

@model MyModel

<form id="myform">
    <div class="readonly">
        This is readonly section. This section gets refreshed after POST
        @Model.FirstName
        @Model.LastName
        @Model.City
    </div>
    <div class="row">
        <div class="col-lg-3">
            <input asp-for="FirstName" />
        </div>
        <div class="col-lg-3">            
            @Html.TextBoxFor(x=>x.LastName) 
        </div>
        <div class="col-lg-3">
            <input id="City" name="City" type="text" value="@Model.City" /> 
        </div>
    </div>
    @DateTime.Now.ToString()
</form>

javascript

$(function () {
    var form = $("#myform");
    $('#btn').click(function () {
        $.ajax({
            cache: false,
            type: 'POST',
            url: '/home/postdata',
            data: form.serialize(),
            dataType: 'html',            
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
        })
        .done(function (response, textStatus, jqXHR) {
            $('#mydetail').html(response);
        })
        .fail(function (response, textStatus, errorThrown) {
            alert(response);
        })
    })
})

MyModel имеет 3 свойства FirstName, LastName и City. В демонстрационных целях я использую 3 разных способа визуализации этих свойств как TextBox.

Шаги

  1. Пользователь нажимает кнопку, чтобы отправить модель на сервер.
  2. Сервер получает модель и добавляет модель с отметкой времени (в секундах).
  3. Сервер возвращает частичное представление с обновленной моделью.
  4. В разделе только для чтения частичный вид записывает свойства как текст. например, @ Model.FirstName, @ Model.LastName, @ Model.City
  5. При частичном просмотре свойства также отображаются как поле input. (Обратите внимание, что каждое поле ввода использует другой синтаксис)

Проблема
После успешного выполнения POST, когда отображается частичное представление, обновляются только раздел readonly и свойство City, и я вижу обновленные данные. Однако FirstName и LastName не обновляются. Почему поле input, в котором используются Tag-Helper и Html Helper, не обновляется?

это ошибка в ASP.NET Core?


jquery asp.net-core asp.net-core-mvc coreclr tag-helpers
person LP13    schedule 02.12.2016    source источник
comment
Вы пробовали использовать InsertionMode = replace в форме ajax?   -  person Yaser    schedule 06.12.2016

Ответы (2)


arrow_upward
2
arrow_downward

Попробуйте очистить состояние модели, вызвав ModelState.Clear() перед обновлением модели во время метода действия Post. Это заставит элементы ввода в вашем (частичном) виде отражать любые изменения в модели.

Я думаю, ваш сценарий такой же, как и в вопросе SO, который я опубликовал 3 года назад, и вот ответ, который я получил

ModelState.Clear () требуется для отобразить обратно свой объект модели

person Frank Fajardo    schedule 06.12.2016
comment
хорошее перенаправление обновит всю страницу ... и я стараюсь не перезагружать всю страницу - person LP13; 06.12.2016
comment
@ LP13, как вы изначально визуализируете форму? Я предполагаю, что у вас есть метод действия Get в вашем контроллере. - person Frank Fajardo; 06.12.2016

arrow_upward
0
arrow_downward

Ответ Фрэнка решает проблему, и использование ModelState.Clear(); приведет к тому, что пример будет работать должным образом.

Посмотрев на источник, я думаю, что это работает: HtmlHelper генерирует входной тег, используя DefaultHtmlGenerator. Он использует метод GenerateInput, который сначала пытается получить значение из ModelState, и если значение не найдено [то есть в случае после ModelState.Clear();], то используется текущее значение модели.

Соответствующий код ниже из источника:

case InputType.Text:
    default:
        var attributeValue = (string)GetModelStateValue(viewContext, fullName, typeof(string));
        if (attributeValue == null)
        {
            attributeValue = useViewData ? EvalString(viewContext, expression, format) : valueParameter;
        }
person bvoleti    schedule 06.12.2016