[英]Load content of div in a page with parameters
我在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 ='cal')有关。
预先谢谢你:)
当我替换return RedirectToAction("rlog009");
通过return PartialView("AfficheRlog009");
,它有效,但只显示部分视图,而不显示整个页面:
您需要返回完整局部视图并将其加载到包含要更改的div的方法中
看一下这个
function reFillGrid(ItemId) {
$("#CartItemGridDiv").load('@Url.Content("~/User/Items/CartItemGrid")');
}
如果您只想更改行或单元格
可以,但是需要确保唯一性
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.