通过表单 post 方法调用视图后，MVC 中的视图设计发生了变化

Question

我在 MVC 项目中遇到一个问题，当我加载页面时，视图设计是完美的，但在我调用同一视图的点击事件时间之后，它改变了设计。

我用了一个局部视图，一个视图和一个控制器。

现在在加载事件时调用索引事件时网站主题显示完美。这是图片：

这是我的索引事件控制器代码：

   public ActionResult Index()
        {
            try
            {
                var getYear = db.yearMaster.OrderBy(y => y.Year).ToList();
                SelectList yearList = new SelectList(getYear, "YearID", "Year");
                ViewBag.YearListName = yearList;

                var getEvent = db.eventMaster.OrderBy(y => y.Event).ToList();
                SelectList eventList = new SelectList(getEvent, "EventID", "Event");
                ViewBag.EventListName = eventList;

                var getBranch = db.branch.OrderBy(y => y.Branch).ToList();
                SelectList branchList = new SelectList(getBranch, "BranchID", "Branch");
                ViewBag.BranchListName = branchList;

                var content = db.eventRegistration.Select(s => new
                {
                    s.EventRegistrationID,
                    s.Image,
                    s.IsActive
                }).Where(c => c.IsActive == true).Take(15).ToList();

                List<EventRegistrationViewModel> contentModel = content.Select(item => new EventRegistrationViewModel()
                {
                    EventRegistrationID = item.EventRegistrationID,
                    Image = item.Image,
                    IsActive = item.IsActive
                }).ToList();

                return View(contentModel);
            }
            catch (Exception ex)
            {
                return View();
            }
        }

这是名为 index.cshtml 的视图：

@model IEnumerable<SchoolWebApplication.ViewModel.EventRegistrationViewModel>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_PublicLayout.cshtml";
}

@*<script src="~/Scripts/jquery-1.8.2.min.js"></script>*@
<script src="~/js/jquery.mousewheel-3.0.6.pack.js"></script>
<script src="~/js/jquery.fancybox.js?v=2.1.3"></script>
<link href="~/Context/jquery.fancybox.css?v=2.1.2" rel="stylesheet" media="screen" />
<link href="~/js/jquery.fancybox.css" rel="stylesheet" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function ()
    {
      $("#ShowImage").fancybox({
          helpers:
          {
              title:
              {
                type: 'float'
             }
          }
        });
    });
</script>
<style type="text/css">
  .imgBox 
   {
        width: 200px;
        height: 200px;
        opacity: 1.0;
        filter: alpha(opacity=100);
    }
   .imgBox:hover
   {
        -moz-box-shadow: 0 0 10px #ccc;
        -webkit-box-shadow: 0 0 10px #ccc;
         box-shadow: 0 0 10px #ccc;
         opacity: 0.4;
         filter: alpha(opacity=40);
   }

</style>
@using (Html.BeginForm("FilterImage", "Glimpses", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()

    <script>
        $(function () {

            $("#YearList").change(function () {
                $("#yearID").val($(this).val()); 
            });

            $("#eventList").change(function () {
                $("#eventID").val($(this).val());
            });

            $("#branchList").change(function () {
                $("#branchID").val($(this).val());
            });

        });
    </script>

    <fieldset>
            <legend>
                <div class="row">

                    <div class="col-sm-2" style="margin-left: 38px; width:149px">
                        @Html.DropDownList("YearList", ViewBag.YearListName as SelectList, "Select Year")
                    </div>
                    <div class="col-sm-2">
                        @Html.DropDownList("eventList", ViewBag.EventListName as SelectList, "Select Event")
                    </div>
                    <div class="col-sm-5">
                        @Html.DropDownList("branchList", ViewBag.BranchListName as SelectList, "Select Branch")
                    </div>
                    <div class="col-sm-1">
                        <input type="submit" value="Get Image" id="btn_searchimage" />
                    </div>
                </div>
            </legend>
        </fieldset>
    <div style="height:600px; margin-left: 25px;">
        <div style="border-bottom:1px solid Red;"></div>
            <div class="row-fluid">
              <div class="span2">
                 <div class="item">
                   @foreach (var item in Model)
                   {
                       <script>
                           alert();
                       </script>
                     <div style=" margin:10px; float:left; height:200px; overflow:hidden; width:200px;">
                       <a id="ShowImage" class="fancybox-button" data-rel="fancybox-button" 
                           href="#">
                         <div class="zoom">
                             <img src='/Glimpses/RetrieveEventImage/@item.EventRegistrationID' alt="No Image" class="imgBox"/>
                              <div class="zoom-icon"></div>
                         </div>
                        </a>
                      </div>
                   }
                    </div>
                </div>
            </div>
    </div>
}

现在，到目前为止没有问题，但是如果我像图像中看到的那样过滤数据并调用视图，那么设计就会改变。

这是更改后的图像：

这是同一控制器中的 filterimage 事件代码：

public ActionResult FilterImage(EventRegistrationViewModel eventRegistrationViewModel, int yearList, int eventList, int branchList) //
{
    try
    {
        var getYear = db.yearMaster.OrderBy(y => y.Year).ToList();
        SelectList abc = new SelectList(getYear, "YearID", "Year");
        ViewBag.YearListName = abc;

        var getEvent = db.eventMaster.OrderBy(y => y.Event).ToList();
        SelectList def = new SelectList(getEvent, "EventID", "Event");
        ViewBag.EventListName = def;

        var getBranch = db.branch.OrderBy(y => y.Branch).ToList();
        SelectList ijk = new SelectList(getBranch, "BranchID", "Branch");
        ViewBag.BranchListName = ijk;

        var content = db.eventRegistration.Select(s => new
        {
            s.EventRegistrationID,
            s.EventID,
            s.Image,
            s.IsActive,
            s.YearID,
            s.BranchID
        }).Where(c => c.IsActive == true && c.YearID == yearList && c.BranchID == branchList && c.EventID == eventList).ToList();

        List<EventRegistrationViewModel> contentModel = content.Select(item => new EventRegistrationViewModel()
        {
            EventRegistrationID = item.EventRegistrationID,
            Image = item.Image,
            IsActive = item.IsActive,
            YearID = yearList,
            BranchID = branchList
        }).ToList();

        return View("index",contentModel);
    }
    catch (Exception ex)
    {
        return View();
    }
}

Answer 1

对我来说，问题在于这种类型的链接脚本和 css。尝试使用以下命令在服务器上解析您的 url：

<%=ResolveUrl("~/path/file.js")

像这样：

<script src="<%=this.ResolveUrl("~/js/jquery.mousewheel-3.0.6.pack.js")%>"></script>

通过表单 post 方法调用视图后，MVC 中的视图设计发生了变化

After calling view by form post method view design is changed in MVC

asp.net-mvc

partial-views

view