[asp.net mvc][jquery]簡易ajax load html到畫面上的方式jquery.load(此ajax方式有搭配partial view)

  • 106
  • 0

[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囉,如下:


大概是這樣…


參考資料:
https://api.jquery.com/load/