我有一个带有不同过滤器的表单和一个"开始"在C#/ ASP.NET MVC中的按钮,当我点击按钮时,由于Ajax,我在部分视图中显示我的数据库的数据,具体取决于参数。
在这个局部视图中,我有一个链接,它将参数发送到控制器以执行插入(并且单元格的颜色会发生变化,绿色变为白色或白色变为绿色),但在插入后,整个页面都会刷新, 我只是想刷新我的局部视图。
这要归功于ajax吗?
我的观点代码:
@using System.Web.Script.Serialization;
@{
ViewBag.Title = "rlog009";
Layout = "~/Views/Shared/_Layout.cshtml";
List<SelectListItem> listAtelier = new List<SelectListItem>();
SelectListItem tous = new SelectListItem();
tous.Value = "TOUS";
tous.Text = "TOUS LES ATELIERS";
tous.Selected = true;
listAtelier.Add(tous);
foreach (KeyValuePair<string, string> key in ViewData["atelier"] as Dictionary<string, string>)
{
SelectListItem atelier = new SelectListItem();
atelier.Value = key.Key;
atelier.Text = key.Value;
listAtelier.Add(atelier);
}
List<SelectListItem> listIlot = new List<SelectListItem>();
List<string> listItemIlot = new List<string>();
foreach (KeyValuePair<string, string> key in ViewData["ilot"] as Dictionary<string, string>)
{
SelectListItem ilot = new SelectListItem();
ilot.Value = key.Key;
ilot.Text = key.Value;
listIlot.Add(ilot);
listItemIlot.Add(key.Value);
}
}
@using (Ajax.BeginForm("AfficheRlog009", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "divAfficheRlog009",
HttpMethod = "POST",
LoadingElementId = "loadAjax"
}))
{
<div class="row">
<div class="col-md-9" style="padding-top:6px;">
<a href="#" class="not-active-title">
<u>Planning des machines</u> :
</a>
</div>
<div class="col-md-3">
<div style="margin-top:10px;"></div>
<a href="#" class="not-active-date">
<u>Date du document</u> : @Html.Label(DateTime.Now.ToShortDateString()) <br />
<u>Référence</u> : <strong>rlog009.cshtml</strong>
</a>
</div>
</div>
<hr />
<form class="form">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="Tdate_d">Date de début</label>
@Html.TextBox("Tdate_d", DateTime.Now.ToShortDateString(), new { @class = "form-control" })
</div>
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="Ddl_atelier">Atelier</label>
@Html.DropDownList("Ddl_atelier", listAtelier, new { @class = "form-control" })
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="Ddl_ilot">Ilot</label>
@Html.DropDownList("Ddl_ilot", listIlot, new { @class = "form-control" })
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="Tposte">Matricule</label>
@Html.TextBox("Tposte", "%", new { @class = "form-control" })
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="~/image/p_vert.jpg" width="28" height="25" class="img-responsive" style="border:dotted;display:inline-block;" />
<span>>= 7h30</span>
</div>
<div class="col-md-4">
<img src="~/image/p_orange.jpg" width="28" height="25" class="img-responsive" style="border:dotted;display:inline-block;" />
<span>< 7h30</span>
</div>
<div class="col-md-4">
<img src="~/image/p_blanc.jpg" width="28" height="25" class="img-responsive" style="border:dotted;display:inline-block;" />
<span>= 0</span>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group" style="padding-top:24px;">
<input type="submit" value="Lancer" id="btnLancer" class="btn btn-primary" />
</div>
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</form>
}
<div id="divAfficheRlog009"></div>
<img id="loadAjax" src="http://www.mediaforma.com/sdz/jquery/ajax-loader.gif" style="display:none">
@* Import d'un fichier pour reformater les chaînes JSON *@
<script src="~/Scripts/ReformatString.js"></script>
@{
JavaScriptSerializer jss = new JavaScriptSerializer();
string ilotJSON = jss.Serialize(listItemIlot);
}
<script type="text/javascript">
$(function () {
$("#Tdate_d").datepicker($.datepicker.regional["fr"]);
});
$("#Ddl_ilot").append('<option selected="selected" value="TOUS">Tous les ilots</option>');
var listIlotJSON = '@ilotJSON';
listIlotJSON = formatString(listIlotJSON);
listIlotJSON = JSON.parse(listIlotJSON);
$("#Ddl_atelier").change(function () {
$("#Ddl_ilot").removeAttr("disabled");
var value = $("#Ddl_atelier").val();
var numAtelier = value.substr(0, 2);
$("#Ddl_ilot").children().remove();
for (var i = 0; i < listIlotJSON.length; i++) {
var numIlot = listIlotJSON[i].substr(0, 2);
if (numIlot == numAtelier) {
$("#Ddl_ilot").append('<option value="' + listIlotJSON[i].substr(0, 4) + '">' + listIlotJSON[i] + '</option>');
}
}
$("#Ddl_ilot").append('<option selected="selected" value="TOUS">Tous les ilots</option>');
});
</script>
部分视图的代码:
@using System.Globalization;
<div class="table-responsive" style="padding-top:30px;">
<table class="table table-bordered">
<thead>
<tr>
<th>POSTE</th>
<th>CR</th>
<th>LIBELLE</th>
<th colspan="3">NBR EQ</th>
<th>Machine</th>
@foreach (string row in ViewBag.ListEnTete)
{
<th>@Html.Raw(row)</th>
}
</tr>
</thead>
<tbody>
@{
bool isClassSuccess = true;
string classLigne;
foreach (List<string> item in ViewBag.ListHisto)
{
if (isClassSuccess)
{
classLigne = "#dff0d8";
isClassSuccess = false;
}
else
{
classLigne = "#f2dede";
isClassSuccess = true;
}
@:<tr style='background-color:@classLigne !important; '>
<td>@item[0] </td>
<td>@item[1] </td>
<td>@item[2] </td>
for (int i = 3; i < 6; i++)
{
int eq;
if (i == 3)
{
eq = 1;
<td>@Html.Raw("<a href='/Logistique/Logistique/rlog009eq?poste=" + item[0] + "&eq=" + eq + "'>" + item[i] + "</a>") </td>
}
else if (i == 4)
{
eq = 2;
<td>@Html.Raw("<a href='/Logistique/Logistique/rlog009eq?poste=" + item[0] + "&eq=" + eq + "'>" + item[i] + "</a>") </td>
}
else if (i == 5)
{
eq = 3;
<td>@Html.Raw("<a href='/Logistique/Logistique/rlog009eq?poste=" + item[0] + "&eq=" + eq + "'>" + item[i] + "</a>") </td>
}
}
<td>@item[6] </td>
int k = 7;
foreach (string row in ViewBag.ListEnTete)
{
// Parsage de la chaîne en date
string date = row;
string[] arrDate = date.Split('/');
<td>@Html.Raw("<a id='cal' href='/Logistique/Logistique/rlog009cal?machine=" + item[6] + "&date=" + arrDate[2]+ arrDate[1] + arrDate[0]+ "'>" + item[k] + "</a>")</td>
k++;
}
@:</tr>
}
}
</tbody>
</table>
</div>
链接控制器的代码:
[ModuleFilter(FilterFormulaire = false, SourceFormulaire = "rlog009")]
public ActionResult rlog009cal(string machine, string date)
{
model.setCalendrier(machine, date);
return RedirectToAction("rlog009");
}
该操作与部分视图的最后一个链接有关(id =&#39; cal&#39;)。
提前感谢您:)
当我将return RedirectToAction("rlog009");
替换为return PartialView("AfficheRlog009");
时,
它有效,但它只显示部分视图,而不是整个页面:
答案 0 :(得分:0)
您需要返回完整局部视图的方法,并将其加载到您想要更改的div中
检查出来
function reFillGrid(ItemId) {
$("#CartItemGridDiv").load('@Url.Content("~/User/Items/CartItemGrid")');
}
如果您只想更改行或单元格
你可以,但你需要确保唯一性