[asp.net mvc][jquery]簡易ajax load html到畫面上的方式jquery.load(此ajax方式有搭配partial view)
javascript:
const myParamObj = {
CompanyNo: modalData.ReportData.CompanyNo,
Type: '',
SignEmployeeNo: '',
};
//#divActionSign是要載入partial view的div
$("#divActionSign").load(appPath + 'MyController/MyFunction/', { model: myParamObj }, function () {
//load complete(即ajax complete)的javascript程式碼
//寫在這裡面,如果complete之後沒有必須執行的程式碼就……這裡放空。
});
c#端controller:
[OutputCache(NoStore = true, Duration = 0)]
public ActionResult MyFunction(MyModel model)
{
MyDbContext dal = new MyDbContext();
if (Request.IsAjaxRequest())
{
var resultListModel = dal.GetFormSignList(model);
return PartialView("_ResultList", resultListModel);
}
else
{
return Content("Fail");
}
}
C#端dbcontext:(主要是商業邏輯)
public MyResultListModel MyFunction(MyModel model)
{
using (MyEntities db = new MyEntities())
{
MyResultListModel result = new MyResultListModel();
return result;
}
}
partial view的cshtml:
@model MyProject.Models.MyResultListModel
<table name="tblSign" border="1" class="table table-sm" style="margin-top: 20px">
<thead class="table-info">
<tr>
<th scope="col" width="5%">
#
</th>
<th scope="col" width="10%">
使用者
</th>
<th scope="col" width="14%">
執行結果
</th>
<th scope="col" width="15%">
建立時間
</th>
<th scope="col">
其他意見
</th>
</tr>
</thead>
<tbody name="tbodySign">
@{
int rowCounter = 0;
int radioCounter = 0;
}
@foreach (var item in Model.MyResultList)
{
rowCounter = rowCounter + 1;
string checkY = "";
string checkN = "";
string radioDisabled = "";
string textReadOnly = "";
if (item.YNSign != null)
{
if (item.YNSign.ToLower() == "y")
{
checkY = "checked";
}
else if (item.YNSign.ToLower() == "n")
{
checkN = "checked";
}
}
if (item.IsReadOnly == true)
{
radioDisabled = "disabled";
textReadOnly = "readonly";
}
<tr>
<th scope="row"><label name="lblNo">@rowCounter</label></th>
<td class="text-center">
<label name="lblEmployeeNo">@item.EmployeeNo</label>
</td>
<td class="text-center">
<div class="form-check form-check-inline">
@{
radioCounter++;
tempRadioId = radioIdPrefix + radioCounter.ToString();
tempRadioName = tempRadioId;
}
<input class="form-check-input" type="radio" id="@tempRadioId" name="@tempRadioName" @radioDisabled @checkY value="Y">
<label class="form-check-label" for="@tempRadioId">同意</label>
</div>
<div class="form-check form-check-inline">
@{
radioCounter++;
tempRadioId = radioIdPrefix + radioCounter.ToString();
}
<input class="form-check-input" type="radio" id="@tempRadioId" name="@tempRadioName" @radioDisabled @checkN value="N">
<label class="form-check-label" for="@tempRadioId">不同意</label>
</div>
</td>
@{
string createDateTime = item.CreateDateTime.ToString("yyyy/MM/dd HH:mm");
if (createDateTime == "0001/01/01 00:00")
{
createDateTime = "";
}
}
<td class="text-center">
<label name="lblCreateDateTime">@createDateTime</label>
</td>
<td>
<textarea name="txtComment" class="form-control" @textReadOnly style="min-width: 100%" rows="1">@item.Comment</textarea>
</td>
</tr>
}
</tbody>
</table>
Index View的cshtml:
<div id="divActionSign"></div>
最後在畫面上就會ajax載入一個table囉,如下:
大概是這樣…