Блог

Главная - Вопросы по программированию - Использование jQuery .html с возвратом каретки

Использование jQuery .html с возвратом каретки

#jquery #asp.net-mvc #razor

#jquery #asp.net-mvc #бритва

Вопрос:

Я работаю над проектом MVC. У меня есть контейнер div, к которому я хочу добавить частичное представление. Я получаю сообщение об ошибке, потому что HTML-код моего частичного представления содержит возврат каретки.

JavaScript:

 $("#containerOptions").html('@{Html.RenderPartial("_DropDownOptions", Model);}');

Частичный просмотр:

 <div id="divOptions">
   <label>I would like to browse by:</label>
   @using (var dd = Html.Bootstrap().Begin(new DropDown("Select Option").Class("dropDownElement").Id("dropDownOption")))
   {
      @dd.Header("Otpions");
      @dd.ActionLink("City", "#").Class("dropDownElement");
      @dd.ActionLink("Zip", "#").Class("dropDownElement");
      @dd.ActionLink("County", "#").Class("dropDownElement");
   }                                                                                                                                                             
</div>

Я знаю, что мой html-код не является проблемой, потому что он работает в другом месте. Я также повторил проблему, просто вставив <p>Hi</p><p>Fred</p> свой частичный вид, который работает.

Но

 <p>Hi</p>
<p>Fred</p>

не работает.

Есть ли способ заставить вызов .html игнорировать возвраты каретки в моем документе? Я бы предпочел не удалять их, поскольку это значительно снижает читаемость.

Редактировать:

Я попытался выполнить замену строки, чтобы удалить новые строки, но это не сработало.

 var s = '@{Html.RenderPartial("_DropDownOptions", Model);}'

var bob = s.replace(/[nr]/g, '');

$("#containerOptions").html(bob);

Комментарии:

1. Javascript не принимает многострочную строку. Вам нужно экранировать ваши новые строки или удалить их.

2. Хорошо…. Это как раз то, о чем я спрашивал, как это сделать… Я попытался выполнить замену символа новой строки, но либо сделал это неправильно, либо просто не работает в этой ситуации.

3. Может быть, вам следует показать нам свое регулярное выражение? Я могу помочь, если ваше регулярное выражение неверно, но ASP.net / бритва — это не мой опыт. Я не очень помогаю.

4. Отредактируйте, чтобы показать замену, которую я пробовал.

5. Не вводите HTML в строковые константы. У этого много проблем (как вы обнаруживаете). Попробуйте решение ниже.

Ответ №1:

Вместо того, чтобы вводить строковую константу HTML в код Javascript, введите свой view HTML в скрытый элемент на странице в виде HTML и ссылайтесь на это:

 <script id="template" type="text/template">
     @Html.Partial("_DropDownOptions", Model)
</script>

text/template является неизвестным типом содержимого, поэтому просто игнорируется для рендеринга.

jQuery:

 // This reparents the elements
$("#containerOptions").append( $('#template').children() );

или

 // Slightly slower, but leaves the original intact
$("#containerOptions").html( $('#template').html() );

Это дает вам гораздо лучшую читаемость и гибкость. HTML в строках, как правило, является «плохой» идеей.

Комментарии:

1. Вау, очень аккуратное решение. Делает именно то, что я хотел. Спасибо.

2. Нет проблем. Я использую ту же технику для HTML-шаблонов, поскольку ее гораздо проще читать, чем HTML в строках.

3. OId ответ, но мне очень помог! Спасибо!

4. @Nsevens: это не возраст ответа… важно то, что в нем есть 🙂 Некоторые методы живут годами. Просто использовал это снова на прошлой неделе. Спасибо

5. @GoneCoding разве это не правда! 😉

Метки: