[英]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.