.NET MVC View层元素整理

这里的View是来自 C#创建的带MVC5视图的控制器，是JQuery

表格：

 //index需要返回这个model，这是控制器中
 //第几页
 int pageNumber = (page ?? 1);
 //ToPagedList自动分页，第一个参数是页码，第二个是单页显示条数
 return View(data.ToPagedList(pageNumber, 15));

 //这是View中
@model PagedList.IPagedList<FundClear.Models.计提费用核算表>
@using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/My97DatePicker/WdatePicker.js"></script>
<script>
    $(document).ready(function () {
	//查询按钮
        $("#btnSubmit").click(function () {
            var strFilter = "";
            if ($("#productId").val().trim() != "")
                strFilter += "&productId=" + $("#productId").val();
            if ($("#sysDate1").val().trim() != "")
                strFilter += "&sysDate1=" + $("#sysDate1").val();
            if ($("#sysDate2").val().trim() != "")
                strFilter += "&sysDate2=" + $("#sysDate2").val();

            location.href = "/计提费用表/Index?page=1&flag=1" + strFilter;
        });

        $("#btnDelete").click(function () {
            if ($(".checkPath:checked").length > 0) {
                if (confirm("确定要删除所选指令吗？")) {
                    var ids = ",";
                    $(".checkPath:checked").each(function () {
                        ids += $(this).val() + ",";
                    });
                    $.ajax({
                        url: "/计提费用表/Delete",
                        datatype: "json",
                        data: { "ids": ids },
                        type: "get",
                        success: function (data) {
                            if (data) {
                                alert("删除成功");
                                location.href = document.URL;
                            }
                        }
                    });
                }
            }
            else {
                alert("请最少选择一条指令!");
            }
        });

        $("#btnExport").click(function () {
            $.ajax({
                url: "/计提费用表/导出计提费用核算表",
                type: "get",
                data: { "productId": $("#productId").val(), "sysDate1": $("#sysDate1").val(), "sysDate2": $("#sysDate2").val() },
                datatype: "json",
                success: function (data) {
                    if (data) {
                        if (data.length > 100)
                            location.href = "/Account/AuthorizeFail";
                        else
                            location.href = "../../Excels/Common/" + data;
                    }
                    else {
                        alert("没有查询到任何数据.");
                    }
                }
            });
        });

        /** 判断知否为空  **/
        function isNull(name) {
            if (name == null || name == "") {
                return true;
            }
        }

        $("#saveExcelData").click(function () {
            var formData = new FormData();
            var name = $("#importFile").val();
            console.log($("#importFile")[0].files[0])
            formData.append("file", $("#importFile")[0].files[0]);
            formData.append("name", name); //可以使用formData.append()传递多个参数
            console.log(formData);
            if (isNull(name)) {
                alert("未选择导入文件！");
                return;
            }
            $.ajax({
                url: "/计提费用表/UploadExcel",
                datatype: "json",
                enctype: "multipart/form-data",
                data: formData,
                type: "post",
                // 告诉jQuery不要去处理发送的数据
                processData: false,
                // 告诉jQuery不要去设置Content-Type请求头
                contentType: false,
                success: function (result) {
                        alert(result);
                        location.href = document.URL;
                }
            });
        });
        $('.chosen-select').chosen({
            width: "200px",
            search_contains: true,
            no_results_text: "没有搜索到匹配项",
        });

         $("#listTable").on("click", ".checkPath", function () {
            document.getElementById("checkPathAll").checked = $(".checkPath").length == $(".checkPath:checked").length;
        });

        $("#checkPathAll").click(function () {
            var checked = this.checked;
            $(".checkPath").each(function () {
                this.checked = checked;
            })
        });
    });
</script>
@{
    ViewBag.Title = "计提费用表";
}

<h2>计提费用核算表</h2>
<div>
    <p>
        <input id="importFile" name="excelFile" type="file" value="选择要导入的文件">
    </p>
    <p>
        <input type="button" id="saveExcelData" value="导入银行流水" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        @Html.ActionLink("初始数据维护", "Index", "初始数据维护表")
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        @Html.ActionLink("查看初始数据维护", "Index", "计提初始数据维护记录表")
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="../Excels/计提费用银行流水导入模板.xlsx" style="color: #ff0000; text-decoration: none;">下载导入模板</a>
    </p>
</div>
<hr />
<p>
    产品名称:
    @Html.DropDownList("productId", (SelectList)ViewBag.Product_id, "全部", new { style = "width:330px;" })
    实际发生日:
    @Html.TextBox("sysDate1", ViewBag.SysDate1 as string, new { onclick = "WdatePicker()", style = "width:185px;", id = "sysDate1" })-
    @Html.TextBox("sysDate2", ViewBag.SysDate2 as string, new { onclick = "WdatePicker()", style = "width:185px;", id = "sysDate2" })
    <input type="button" id="btnSubmit" value=" 过滤 " />
    <input type="button" id="btnDelete" value="批量删除" />
    <input type="button" id="btnExport" value="导出计提费用核算表" />
</p>
<table class="table" id="listTable">
    <tr>
        <th>
            <input type="checkbox" id="checkPathAll" />
        </th>
        <th>
            流水变动日期
        </th>
        <th>
            产品名称
        </th>
        <th>
            规模变动
        </th>
        <th>
            计提起始日
        </th>
        <th>
            计提天数
        </th>
    </tr>


    @foreach (var item in Model)
    {
<tr>
    <td>
        <input type="checkbox" name="productId" value="@item.id" class="checkPath" />
    </td>
    <td>
        @(item.流水变动日期.ToString("yyyy-MM-dd"))
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.产品名称)
    </td>
    <td>
        @if (item.申购或赎回 == "赎回")
        {
            @*@Html.DisplayFor(modelItem => item.规模变动)*@
            @Html.Raw("<span style='color:red'>"+item.规模变动+"</span>");
        }
        else
        {
            @Html.DisplayFor(modelItem => item.规模变动)
        }

    </td>
    <td>
        @(item.计提起始日.ToString("yyyy-MM-dd"))
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.计提天数)
    </td>
</tr>
    }

</table>
<br />
页面 @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount
//这里是查询时需要带的条件
@Html.PagedListPager(Model, page => Url.Action("Index",
                                    new
                                    {
                                        page,
                                        flag = ViewBag.Flag,
                                        productId = ViewBag.productId,
                                        sysDate1 = ViewBag.SysDate1,
                                        sysDate2 = ViewBag.SysDate2
                                    }))

1. 空格转义字符  

2. <br/> 换行

3. <hr/> 横线

4. 下载项目文件中已经存在的文件

<a href="../Excels/计提费用银行流水导入模板.xlsx" style="color: #ff0000; text-decoration: none;">下载导入模板</a>

5. 页面跳转，第一个参数是按钮名，第二个是控制器view文件下的cshtml文件名，第三个控制器名称

@Html.ActionLink("查看初始数据维护", "Index", "计提初始数据维护记录表")

6. 下拉框，默认显示全部，需要配合控制器中的ViewBag使用

产品名称:
@Html.DropDownList("productId", (SelectList)ViewBag.Product_id, "全部", new { style = "width:330px;" })

第一个参数是查询集合，第二个是查询字段，第三个是字段别名，第四个是条件值

ViewBag.Product_id = new SelectList(Product, "key", "key", productId);

7. 日期选择框

实际发生日:
@Html.TextBox("sysDate1", ViewBag.SysDate1 as string, new { onclick = "WdatePicker()", style = "width:185px;", id = "sysDate1" })

需要引入这个 <script src="~/Scripts/My97DatePicker/WdatePicker.js"></script>

8. // 文本框联动 改变一个值时另一个值变化 @readonly = "readonly"只读

   <div class="form-group">
            @Html.LabelFor(model => model.锁定结束净值日期, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.锁定结束净值日期, new { htmlAttributes = new { onclick = "WdatePicker({ skin: 'whyGreen'})", @id = "PortionConfirmationDate", @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.锁定结束净值日期, "", new { @class = "text-danger" })
            </div>
        </div>

        $("#PortionConfirmationDate").blur(function () {
            var 成立日期 = $('input[name=成立日期]').val();
            var 到期日期 = $('input[name=到期日期]').val();
            var 结束净值日期 = $('input[name=锁定结束净值日期]').val();
            var 起始净值 = $('input[name=锁定开始净值]').val();
            var 收益率 = $('input[name=收益率]').val();
            var 锁定金额 = $('input[name=金额]').val();
            var 锁定份额 = $('input[name=份额]').val();
            var 账户ID = $('input[name=Cash_account_id]').val();
            $.ajax({
                url: "/现金管理锁定期合同表/锁定结束净值日期变更",
                datatype: "json",
                data: { "成立日期": 成立日期, "到期日期": 到期日期, "结束净值日期": 结束净值日期, "起始净值": 起始净值, "收益率": 收益率, "锁定金额": 锁定金额, "锁定份额": 锁定份额, "账户ID": 账户ID },
                success: function (dt) {
                    if (dt)
                    {
                        $('input[name=锁定结束净值]').val(dt.净值);
                        $('input[name=奖励金额]').val(dt.奖励金额);
                    }
                    else {
                        $('input[name=锁定结束净值]').val(0);
                        $('input[name=奖励金额]').val(0);
                    }
                }
            });
        });

9. 下拉菜单，href 可以跳转到对应的菜单页

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">固收合同 <span class="caret"></span></a>
<ul class="dropdown-menu" style="background-color: #D5B32B;">
<li><a href="/Fix_Contract">固收合同列表</a></li>
<li><a href="/基金确认函">基金确认函</a></li>
<li><a href="/固收合同导入">CRM导入合同列表</a></li>
</ul>
</li>

AndroidOrCSharp

发布了45 篇原创文章 · 获赞 4 · 访问量 1万+

私信关注

.NET MVC View层元素整理

猜你喜欢