【发布时间】：2018-02-19 08:34:56
【问题描述】：
我正在尝试执行一个替换 div 的 ajax 调用，但我的多选控件正在失去其样式。
我有一个调用我的局部视图的视图：
@Html.Partial("_Languages",Model)
在这个视图中我还引用了unobstrusive-ajax.min.js 文件和相关的css：
<link href="~/SmartAdmin/scripts/Test/css/bootstrap-multiselect.css" rel="stylesheet" /> //This is a the top of my view
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> //This is at the bottom of my view
我有一个脚本文件引用了从我的布局页面调用的jquery 和jquery-ui 文件。
在我的部分观点中，我使用 Ajax.BeginForm 及其选项来替换“listofLanguages”div：
@model AccountRegistrationModel
<div id="listofLanguages">
<article class="col-sm-12 col-md-12 col-lg-6">
<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget jarviswidget-color-darken" id="wid-id-0" data-widget-editbutton="false" data-widget-deletebutton="false" data-widget-togglebutton="false">
<!-- widget options:
usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
data-widget-colorbutton="false"
data-widget-editbutton="false"
data-widget-togglebutton="false"
data-widget-deletebutton="false"
data-widget-fullscreenbutton="false"
data-widget-custombutton="false"
data-widget-collapsed="true"
data-widget-sortable="false"
-->
<header>
<span class="widget-icon"> <i class="fa fa-table"></i> </span>
<h2>Languages </h2>
</header>
<!-- widget div-->
<div>
<!-- widget edit box -->
<div class="jarviswidget-editbox">
<!-- This area used as dropdown edit box -->
</div>
<!-- end widget edit box -->
<!-- widget content -->
<div class="widget-body no-padding">
<div class="widget-body no-padding">
@{
var options = new AjaxOptions()
{
//LoadingElementId = "loadingDisplay",
HttpMethod = "POST",
InsertionMode = InsertionMode.ReplaceWith,
UpdateTargetId = "listofLanguages"
//OnBegin = "ChangeButtonText"
};
}
@using (Ajax.BeginForm("SaveLanguage", "Account", options, new { @id = "ppl", @class = "smart-form" }))
{
@Html.HiddenFor(m => m.UserId)
@Html.HiddenFor(m => m.Email)
TempData["email"] = Model.Email;
<fieldset>
<div class="row">
<section class="col col-6">
<div class="form-group">
<select id="Language" name="Language" style="width:100%" class="select2" value="@Model.Language">
@foreach (var languagemetro in @Model.LanguageMetrosList)
{
<optgroup label="@languagemetro.LanguageMetroName">
@foreach (var language in Model.LanguageList)
{
if (@languagemetro.pkiLanguageMetroID == @language.fkiLanguageMetroId)
{
if (@language.Language == Model.Language)
{
<option value="@language.Language" selected="selected">@language.Language</option>
}
else
{
<option value="@language.Language">@language.Language</option>
}
}
}
</optgroup>
}
</select>
</div>
</section>
<section class="col col-6">
<select id="ddlReadWriteSpeak" name="SelectedReadWriteSpeak" multiple="multiple">
<option value="Read">Read</option>
<option value="Write">Write</option>
<option value="Speak">Speak</option>
</select>
<br />
<br />
<button type="submit" class="btn btn-success btn-xs pull-right">
Save Language
</button>
@*<div class="pull-right">
@Html.ActionLink("Save Language", "SaveLanguage", "Account", new { userEmail = Model.Email, iLanguageId = $('Languages').val() }, new { @class = "btn btn-success btn-xs" })
</div>*@
</section>
</div>
</fieldset>
}
</div>
<table id="dt_basic" class="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th style="width:5%"></th>
<th data-class="expand"><i class="text-muted hidden-md hidden-sm hidden-xs"></i> Language</th>
<th data-hide="phone" style="text-align:center"><i class="text-muted hidden-md hidden-sm hidden-xs"></i> Read</th>
<th data-hide="phone,tablet" style="text-align:center"><i class="txt-color-blue hidden-md hidden-sm hidden-xs"></i> Write</th>
<th data-hide="phone,tablet" style="text-align:center"><i class="txt-color-blue hidden-md hidden-sm hidden-xs"></i> Speak</th>
<th></th>
</tr>
</thead>
<tbody>
@{
int a = 0;
foreach (var item in Model.LanguagesViewModelList.OrderBy(x => x.PriorityLevel))
{
a++;
<tr>
<td>
@if (a == Model.LanguagesViewModelList.Count())
{
<a href="@Url.Action("LanguagePriorityUp", new { pkiRes_LanguageId=item.Res_LanguageId })">
<span class="fa fa-toggle-up"></span>
</a>
}
else if (item.PriorityLevel > 1)
{
<a href="@Url.Action("LanguagePriorityUp", new { pkiRes_LanguageId=item.Res_LanguageId })">
<span class="fa fa-toggle-up"></span>
</a>
<a href="@Url.Action("LanguagePriorityDown", new { pkiRes_LanguageId=item.Res_LanguageId })">
<span class="fa fa-toggle-down"></span>
</a>
}
else if (item.PriorityLevel == 1)
{
<a href="@Url.Action("LanguagePriorityDown", new { pkiRes_LanguageId=item.Res_LanguageId })">
<span class="fa fa-toggle-down"></span>
</a>
}
</td>
<td>@item.Language</td>
<td style="text-align:center">
@if (item.Read == "Yes")
{
<span class="fa fa-check"></span>
}
else
{
<span class="fa fa-close"></span>
}
</td>
<td style="text-align:center">
@if (item.Write == "Yes")
{
<span class="fa fa-check"></span>
}
else
{
<span class="fa fa-close"></span>
}
</td>
<td style="text-align:center">
@if (item.Speak == "Yes")
{
<span class="fa fa-check"></span>
}
else
{
<span class="fa fa-close"></span>
}
</td>
<td>
@*<a href="#" id="dialog_link" class="btn btn-danger btn-xs">
<span class="fa fa-trash-o"></span>
</a>*@
<a href="@Url.Action("DeleteLanguage", new { pkiRes_LanguageId = item.Res_LanguageId })">
<span class="fa fa-trash-o"></span>
</a>
@*@Html.ActionLink("Delete","Delete", new { employmentId = item.pkiEmploymentDetailID, userId = Model.fkiUserID })*@
@*<button type="submit" onclick="deleteEmployment('@item.pkiEmploymentDetailID')" class="btn btn-xs btn-danger text-center">
<span class="fa fa-trash-o"></span>
</button>*@
</td>
</tr>
}
}
</tbody>
</table>
</div>
<!-- end widget content -->
</div>
<!-- end widget div -->
</div>
<!-- end widget -->
</article>
</div>
我缺少什么我的多选控件没有通过 css？
编辑 所以使用 firefox 并查看控制台日志，它没有显示任何内容，但是使用 chrome 我得到了这个错误：
Uncaught TypeError: Cannot read property 'fn' of undefined
我怀疑这是因为我的 multi-select.js 文件在 ajax 调用后没有被拉出，但我不知道如何在 ajax 调用后包含它？
如果我遗漏了任何信息，请告诉我。
【问题讨论】：
标签： css ajax asp.net-mvc asp.net-mvc-5