2017-11-23 2 views
0

mvcプロジェクトで1つの問題が発生しました。そのときにページを読み込むとビューデザインは完璧ですが、その時、それはデザインを変えた。フォームでポストメソッドを呼び出すと、ビューのデザインがmvcで変更された

はloadイベント時に完璧示すウェブサイトのテーマをインデックスイベントを呼び出したとき、私は今1つの部分図、1つのビューと1つのコントローラ

を使用し、より明確な

のためにしてみましょう。ここでは画像

enter image description here

は、ここでインデックスイベントの私のコントローラのコード

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(); 
      } 
     } 

@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> 
} 

index.cshtmlという名前のビューは、この件までノーがある。ここでです問題。しかし、私があなたが画像で見る通りにデータをフィルタリングしてビューを呼び出すと、その時にデザインが変更されます。ここで

が変更された画像

enter image description here

の画像はこちら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(); 
    } 
} 

ありがとうございました。

+0

は 'FilterImage'でも例外がないことを確認してください。 – MUT

+0

申し訳ありません....私は取得していないのですか? –

+0

'FilterImage'アクションをデバッグし、例外をスローせずにコードが実行されることを確認してください。 'catch'ブロックにブレークポイントを追加してください。 – MUT

答えて

1

私の問題は、このタイプのリンクスクリプトとCSSです。これを使用してサーバー上のURLを解決するために試してみてください。このよう

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

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

パスに問題があると思わないので、パスの問題が最初に表示されたデザインビューでは表示したくないそれは明らかである。 –

+0

こちらをご覧くださいhttps://stackoverflow.com/questions/11510502/understanding-the-runat-server-attribute/16729311#16729311デザインビューでは動作するかもしれませんが、ページURLを実行している間におそらく解決されません。 – Anwarus

+0

このような参考リンクをくれてありがとう。しかし、そのリンクはまた、仕事をしなかった。 –

関連する問題