在asp.net中实现搜索MVC与tinyMCE编辑器发生冲突

时间:2017-06-20 13:22:39

标签: javascript jquery asp.net-mvc tinymce

我实现了搜索表单,我可以在其上搜索一些问题,在asp.net MVC中查看答案,我的搜索功能完全正常,我使用TinyMCE编辑来编辑我的问题。

这是我的模特:

  public class Question
    {

        public virtual int Id { get; set; }
        public virtual int CategoryId { get; set; }
        public virtual string Qu { get; set; }

        [AllowHtml]
        [UIHint("tinymce_full_compressed")]
        public virtual string Ans { get; set; }
        public virtual Category Category { get; set; }


    } 

当我在句子之间放置enter时,在我的编辑中,它会创建</br>标记并保存在我的数据库中。在文本框中搜索后,在结果中而不是呈现标记时,它会显示</br>标记。像这样的test<br />test并在浏览器中显示它,而不是在没有test标记的两个不同行中的两个</br>字。它似乎无法翻译编辑器添加到字符串的标签。

。此图显示了会发生什么 what happens after searching strings

这是我的控制器:

  public ActionResult Help(string searchString)
    {
        searchString = Request["search"];
        var repsearch = new RepositorySearch();
        List<Question> question = new List<Question>();
        if (!string.IsNullOrEmpty(searchString))
        {
            question = repsearch.GetAllQuestion().Where(n => n.Qu.ToLower().Contains(searchString.ToLower())).ToList();
        }
        return Request.IsAjaxRequest() ? (ActionResult)PartialView("_QuestionPartial", question) : View(question);
    }

我认为问题与此QuestionPartial有关 这是我的QuestionPartial

  @using iranhoidaytour_com.Models
  @if (Model.Count > 0)
{
<ul id="hs">
    @foreach (Question q in Model)
    {
        <li class="">
            <h5 class="quos">@q.Qu</h5>
            <p class="answ">@q.Ans</p>
        </li>

    }
  </ul>
 }

这是我的TinyMCE设置:

      <script>
   tinymce.init({
       selector: '#mytextarea',
  height: 500,
  theme: 'modern',
  force_br_newlines: false,
  force_p_newlines: false,
  forced_root_block: '',
  plugins: [
    'advlist autolink lists link image charmap print preview hr anchor pagebreak',
    'searchreplace wordcount visualblocks visualchars code fullscreen',
    'insertdatetime media nonbreaking save table contextmenu directionality',
    'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc'
  ],
  toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  toolbar2: 'print preview media | forecolor backcolor emoticons | codesample',
  image_advtab: true,
  templates: [
    { title: 'Test template 1', content: 'Test 1' },
    { title: 'Test template 2', content: 'Test 2' }
  ],
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tinymce.com/css/codepen.min.css'
  ]
 });

    </script>

这是我的观点

<div class="row" id="searchhelp">

    <div class="container">
        @using (Html.BeginForm("Help", "Home", FormMethod.Get, new { @id = "FormSearch", @class = "form-group container" }))
        {

            @Html.TextBox("search", null, new { @class = "form-control col-md-10", @placeholder = "What Is Your Question?Enter Keyword!" })
    <button type="submit" class="left " id="btn-search">
        <i class="fa fa-search" aria-hidden="true"></i>
    </button>
        }
    </div>

</div>




<div id="helpicons" class="container">


    <div id="tagsname">

        <div id="intagsname">
            @Html.Partial("_QuestionPartial", Model)
            <div class="ajaxloader1">
                <img class=""  src="~/Content/img/ajax-loader (4).gif" alt="Alternate Text" />
            </div>
        </div>
    </div>



</div>

感谢任何帮助。感谢

1 个答案:

答案 0 :(得分:1)

这是返回非HTML编码标记所必须做的。:

<h5 class="quos">@q.Qu</h5>
   <p class="answ">@Html.Raw(q.Ans)</p>