您的位置: 首页  >  技术问答  >  关于Ajax调用MVC.Grid更新但css不适用:(Asp.net MVC

关于Ajax调用MVC.Grid更新但css不适用:(Asp.net MVC

分类: 技术问答 • 2022-09-12 21:58:29
问题描述：

所有的东西工作正常第一次数据渲染罚款，但当点击任何页码然后用Ajax调用数据获取成功所有页眉和页脚CSS保持相同的，但表行去附着的CSS不包括请，如果您有任何建议，告诉我。关于Ajax调用MVC.Grid更新但css不适用:(Asp.net MVC

先感谢

AJAX调用之前，这是在浏览器中呈现的HTML。

<html lang="en" class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"><head> 
     <meta charset="utf-8"> 
     <title>Index - Anchor Bay Insurance Managers, Inc.</title> 
     <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon"> 
     <meta name="viewport" content="width=device-width"> 
     <link href="/Content/Site.css" rel="stylesheet"> 
<link href="/Content/bootstrap.css" rel="stylesheet"> 
<link href="/Content/bootstrap-theme.css" rel="stylesheet"> 
<link href="/Content/TwoColumnForm.css" rel="stylesheet"> 


     <link href="/Content/bootstrap.min.css" rel="stylesheet"> 

     <script src="/Scripts/modernizr-2.5.3.js"></script> 

     <script src="/Scripts/jquery-1.9.1.js"></script> 
<script src="/Scripts/Bootstrap/bootstrap.min.js"></script> 
<script src="/Scripts/ladda-bootstrap/spin.min.js"></script><style type="text/css"></style> 
<script src="/Scripts/ladda-bootstrap/ladda.min.js"></script> 
<script src="/Scripts/URI.js"></script> 
<script src="/Scripts/gridmvc.js"></script> 
<script src="/Scripts/gridmvc-ext.js"></script> 


    <script type="text/javascript">window.EBCallBackMessageReceived_ec65_a99d_1166_10f1_472b_e904_7a5b_da73 = function (data) {window.postMessage({name: 'EBCallBackMessageReceived', msg: data, id:'ec65_a99d_1166_10f1_472b_e904_7a5b_da73'}, '*')};if (window.addEventListener) { 
    var callback_func = function(evt) { 
    if ('undefined' != typeof evt.target && "A" == evt.target.nodeName) { 
     var url = evt.target.href; 
     EBCallBackMessageReceived_ec65_a99d_1166_10f1_472b_e904_7a5b_da73(url); 
    } 
    return true; 
    }; 
    var cb_add_listener_result_click = window.addEventListener('click', callback_func, true); 
    var cb_add_listener_result_contextmenu = window.addEventListener('contextmenu', callback_func, true); 
} else if (document.attachEvent) { 
    var callback_func = function() { 
    if ('undefined' != typeof event.srcElement &&'A' == event.srcElement.tagName) { 
     var url = event.srcElement.href; 
     EBCallBackMessageReceived_ec65_a99d_1166_10f1_472b_e904_7a5b_da73(url); 
    } 
    return true; 
    }; 
    var cb_add_listener_result_click = document.attachEvent('onclick', callback_func); 
    var cb_add_listener_result_contextmenu = document.attachEvent('oncontextmenu', callback_func); 
} 


</script><script type="text/javascript">window.EBCallBackMessageReceived_ccb0_9b98_55aa_c6cc_ff2e_a9db_6021_c2dd = function (data) {window.postMessage({name: 'EBCallBackMessageReceived', msg: data, id:'ccb0_9b98_55aa_c6cc_ff2e_a9db_6021_c2dd'}, '*')};if (window.addEventListener) { 
    var callback_func = function(evt) { 
    if ('undefined' != typeof evt.target && "A" == evt.target.nodeName) { 
     var url = evt.target.href; 
     EBCallBackMessageReceived_ccb0_9b98_55aa_c6cc_ff2e_a9db_6021_c2dd(url); 
    } 
    return true; 
    }; 
    var cb_add_listener_result_click = window.addEventListener('click', callback_func, true); 
    var cb_add_listener_result_contextmenu = window.addEventListener('contextmenu', callback_func, true); 
} else if (document.attachEvent) { 
    var callback_func = function() { 
    if ('undefined' != typeof event.srcElement &&'A' == event.srcElement.tagName) { 
     var url = event.srcElement.href; 
     EBCallBackMessageReceived_ccb0_9b98_55aa_c6cc_ff2e_a9db_6021_c2dd(url); 
    } 
    return true; 
    }; 
    var cb_add_listener_result_click = document.attachEvent('onclick', callback_func); 
    var cb_add_listener_result_contextmenu = document.attachEvent('oncontextmenu', callback_func); 
} 


</script></head> 
    <body> 
     <header> 
      <div class="content-wrapper"> 
       <div class="float-left"> 
        <p class="site-title"><a href="/">Restaurant Bar &amp; Tavern Program</a></p> 
       </div> 
       <div class="float-right"> 
        <section id="login"> 

     Hello, <a class="username" href="/Agent/AgentProfile/33" title="Manage">azhar63</a>! 
<form action="/Account/LogOff" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="lZ1mXfXGZsdpR9aYMjceHEQ8KEYvb7P8zyxe9e-Yoj2cmFF761uvsOxtLEdOxm-_NG6lk9nBihRrNUBzLGMZ0w5lYTePwYNqWfEmDzCsCew1">   <a href="javascript:document.getElementById('logoutForm').submit()">Log off</a> 
</form>  

        </section> 
        <nav> 
         <ul id="menu"> 
          <li><a href="/">Home</a></li> 
          <li><a href="/Home/About">About</a></li> 
          <li><a href="/Home/Contact">Contact</a></li> 
         </ul> 
        </nav> 
       </div> 
      </div> 
     </header> 

     <div id="body"> 



        <header> 
         <div class="content-wrapper"> 
          <div class="float-left"> 
            <ul id="menu"> 
               <li><a href="/">Agency</a></li> 
               <li><a href="/Agent">Agent</a></li> 
               <li><a href="/Applicant/Quote">Quote</a></li> 

                 <li><a href="/MetaData">Email Templates</a></li> 

            </ul> 
          </div> 
         </div> 
        </header> 

      <section class="content-wrapper main-content clear-fix"> 




<link href="/Content/bootstrap.min.css" rel="stylesheet"> 



      <ul id="menu"> 
        <li><a href="/Agent/Create">Create Agent</a></li> 
      </ul> 



<h2>Agents</h2> 
<div class="boxDiv" style="width:100%"> 



<div style="width:100%"> 
      <div class="grid-mvc" data-lang="en" data-gridname="metaData" data-selectable="true" data-multiplefilters="false"> 
     <div class="grid-wrap"> 
      <table class="table table-striped grid-table"> 

       <thead> 
         <tr> 
<th class="grid-header"><div class="grid-header-title"><a href="?grid-column=FirstName&amp;grid-dir=0">First Name</a></div></th><th class="grid-header"><div class="grid-header-title"><a href="?grid-column=LastName&amp;grid-dir=0">Last Name</a></div></th><th class="grid-header"><div class="grid-header-title"><a href="?grid-column=AgentUserInfo.UserName&amp;grid-dir=0">UserName</a></div></th><th class="grid-header"><div class="grid-header-title"><a href="?grid-column=AgentOfAgency.Name&amp;grid-dir=0">Agency</a></div></th><th class="grid-header"><div class="grid-header-title"><a href="?grid-column=AgentUserInfo.Email&amp;grid-dir=0">Email</a></div></th><th class="grid-header" style="width:15%;"><div class="grid-header-title"><span></span></div></th> </tr> 

       </thead> 
       <tbody> 
         <tr class="grid-row "> 
<td class="grid-cell" data-name="FirstName">Muhammad Atif</td><td class="grid-cell" data-name="LastName">Aziz</td><td class="grid-cell" data-name="AgentUserInfo.UserName">atif17</td><td class="grid-cell" data-name="AgentOfAgency.Name">Test</td><td class="grid-cell" data-name="AgentUserInfo.Email">[email protected]</td><td class="grid-cell" data-name=""> <div class="grid-action-links"> 
     <a href="/Agent/Details/57" title="Detail View"><i></i></a> 
      <a href="/Agent/Details/57#update" title="Update"><i></i></a> 
      <span class="light1">|</span> 
      <a class="delete" href="/Agent/Delete/57" title="Delete"><i></i></a> 
    </div> 
</td> </tr> 
    <tr class="grid-row "> 
<td class="grid-cell" data-name="FirstName">Sanan</td><td class="grid-cell" data-name="LastName">Chatha</td><td class="grid-cell" data-name="AgentUserInfo.UserName">sanan63</td><td class="grid-cell" data-name="AgentOfAgency.Name">Test</td><td class="grid-cell" data-name="AgentUserInfo.Email">[email protected]</td><td class="grid-cell" data-name=""> <div class="grid-action-links"> 
     <a href="/Agent/Details/56" title="Detail View"><i></i></a> 
      <a href="/Agent/Details/56#update" title="Update"><i></i></a> 
      <span class="light1">|</span> 
      <a class="delete" href="/Agent/Delete/56" title="Delete"><i></i></a> 
    </div> 
</td> </tr> 

       </tbody> 
      </table> 
       <div class="grid-footer"> 

<div class="grid-footer"> 
    <div class="grid-pager"> 
     <ul class="pagination"> 
      <li><a href="#" class="grid-prev-page" title="Previous Page" style="display: none"><span class="glyphicon glyphicon-step-backward"></span></a></li> 
       <li class="active"><a class="grid-page-link" data-page="1">1</a></li> 
       <li><a href="#" class="grid-page-link" data-page="2">2</a></li> 

      <li><a href="#" title="Next Page" class="grid-next-page"><span class="glyphicon glyphicon-step-forward"></span></a></li> 
     </ul> 
    </div> 
</div> 

    </div> 

     </div> 
    </div> 

    </div> 




<script type="text/javascript"> 
    //$(document).on("change",function() { 
    // $(".grid-mvc").gridmvc(); 
    // //$(".grid-mvc").gridmvc().refreshFullGrid(); 
    // //$(".grid-mvc").refreshFullGrid(); 
    //}); 
    //$(document).ajaxComplete(function() { 

    //  $(".grid-mvc").gridmvc().refreshFullGrid(); 
    //}); 
</script> 

</div> 

     <script src="/Scripts/gridmvcajax.custom.js"></script> 



     <script src="/Content/Scripts/Global.js"></script> 


    <script type="text/javascript"> 

     $(document).ready(function() { 
      pageGrids.metaData.ajaxify(
      { 
       getPagedData: "/Agent/Grid", 
       getData: "/Agent/Index" 
      }); 
     }); 
     $(document).ajaxComplete(function() { 
      $(".grid-mvc").gridmvc(); 
     }); 
    </script> 


      </section> 
     </div> 
     <footer> 
      <div class="content-wrapper"> 
       <div class="float-left"> 
        <p style="padding-top:10px;">© 2014 - Anchor Bay Insurance Managers, Inc.</p> 
       </div> 
      </div> 
     </footer> 
</body> 
</html>

阿贾克斯后调用这个是在浏览器中呈现的html。

<html lang="en" class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"><head> 
     <meta charset="utf-8"> 
     <title>Index - Anchor Bay Insurance Managers, Inc.</title> 
     <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon"> 
     <meta name="viewport" content="width=device-width"> 
     <link href="/Content/Site.css" rel="stylesheet"> 
<link href="/Content/bootstrap.css" rel="stylesheet"> 
<link href="/Content/bootstrap-theme.css" rel="stylesheet"> 
<link href="/Content/TwoColumnForm.css" rel="stylesheet"> 


     <link href="/Content/bootstrap.min.css" rel="stylesheet"> 

     <script src="/Scripts/modernizr-2.5.3.js"></script> 

     <script src="/Scripts/jquery-1.9.1.js"></script> 
<script src="/Scripts/Bootstrap/bootstrap.min.js"></script> 
<script src="/Scripts/ladda-bootstrap/spin.min.js"></script><style type="text/css"></style> 
<script src="/Scripts/ladda-bootstrap/ladda.min.js"></script> 
<script src="/Scripts/URI.js"></script> 
<script src="/Scripts/gridmvc.js"></script> 
<script src="/Scripts/gridmvc-ext.js"></script> 


    <script type="text/javascript">window.EBCallBackMessageReceived_9c96_3370_b919_1fd0_f16c_76ca_4bda_54b9 = function (data) {window.postMessage({name: 'EBCallBackMessageReceived', msg: data, id:'9c96_3370_b919_1fd0_f16c_76ca_4bda_54b9'}, '*')};if (window.addEventListener) { 
    var callback_func = function(evt) { 
    if ('undefined' != typeof evt.target && "A" == evt.target.nodeName) { 
     var url = evt.target.href; 
     EBCallBackMessageReceived_9c96_3370_b919_1fd0_f16c_76ca_4bda_54b9(url); 
    } 
    return true; 
    }; 
    var cb_add_listener_result_click = window.addEventListener('click', callback_func, true); 
    var cb_add_listener_result_contextmenu = window.addEventListener('contextmenu', callback_func, true); 
} else if (document.attachEvent) { 
    var callback_func = function() { 
    if ('undefined' != typeof event.srcElement &&'A' == event.srcElement.tagName) { 
     var url = event.srcElement.href; 
     EBCallBackMessageReceived_9c96_3370_b919_1fd0_f16c_76ca_4bda_54b9(url); 
    } 
    return true; 
    }; 
    var cb_add_listener_result_click = document.attachEvent('onclick', callback_func); 
    var cb_add_listener_result_contextmenu = document.attachEvent('oncontextmenu', callback_func); 
} 


</script><script type="text/javascript">window.EBCallBackMessageReceived_7e3f_667e_eaf1_f8e4_cbe5_0a2a_b8c4_6119 = function (data) {window.postMessage({name: 'EBCallBackMessageReceived', msg: data, id:'7e3f_667e_eaf1_f8e4_cbe5_0a2a_b8c4_6119'}, '*')};if (window.addEventListener) { 
    var callback_func = function(evt) { 
    if ('undefined' != typeof evt.target && "A" == evt.target.nodeName) { 
     var url = evt.target.href; 
     EBCallBackMessageReceived_7e3f_667e_eaf1_f8e4_cbe5_0a2a_b8c4_6119(url); 
    } 
    return true; 
    }; 
    var cb_add_listener_result_click = window.addEventListener('click', callback_func, true); 
    var cb_add_listener_result_contextmenu = window.addEventListener('contextmenu', callback_func, true); 
} else if (document.attachEvent) { 
    var callback_func = function() { 
    if ('undefined' != typeof event.srcElement &&'A' == event.srcElement.tagName) { 
     var url = event.srcElement.href; 
     EBCallBackMessageReceived_7e3f_667e_eaf1_f8e4_cbe5_0a2a_b8c4_6119(url); 
    } 
    return true; 
    }; 
    var cb_add_listener_result_click = document.attachEvent('onclick', callback_func); 
    var cb_add_listener_result_contextmenu = document.attachEvent('oncontextmenu', callback_func); 
} 


</script></head> 
    <body> 
     <header> 
      <div class="content-wrapper"> 
       <div class="float-left"> 
        <p class="site-title"><a href="/">Restaurant Bar &amp; Tavern Program</a></p> 
       </div> 
       <div class="float-right"> 
        <section id="login"> 

     Hello, <a class="username" href="/Agent/AgentProfile/33" title="Manage">azhar63</a>! 
<form action="/Account/LogOff" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="wvvSbtslTZV3nqpwsX2eWoeHa91OwSxF0ne60C6QLvWeWEKVKZhhembtcbPeVLMKlVBKGA7bcK4oAnIIoK5yhG_DrAJRASQZbV_uyqeJLqQ1">   <a href="javascript:document.getElementById('logoutForm').submit()">Log off</a> 
</form>  

        </section> 
        <nav> 
         <ul id="menu"> 
          <li><a href="/">Home</a></li> 
          <li><a href="/Home/About">About</a></li> 
          <li><a href="/Home/Contact">Contact</a></li> 
         </ul> 
        </nav> 
       </div> 
      </div> 
     </header> 

     <div id="body"> 



        <header> 
         <div class="content-wrapper"> 
          <div class="float-left"> 
            <ul id="menu"> 
               <li><a href="/">Agency</a></li> 
               <li><a href="/Agent">Agent</a></li> 
               <li><a href="/Applicant/Quote">Quote</a></li> 

                 <li><a href="/MetaData">Email Templates</a></li> 

            </ul> 
          </div> 
         </div> 
        </header> 

      <section class="content-wrapper main-content clear-fix"> 




<link href="/Content/bootstrap.min.css" rel="stylesheet"> 



      <ul id="menu"> 
        <li><a href="/Agent/Create">Create Agent</a></li> 
      </ul> 



<h2>Agents</h2> 
<div class="boxDiv" style="width:100%"> 



<div style="width:100%"> 
      <div class="grid-mvc" data-lang="en" data-gridname="metaData" data-selectable="true" data-multiplefilters="false"> 
     <div class="grid-wrap"> 
      <table class="table table-striped grid-table"> 

       <thead> 
         <tr> 
<th class="grid-header"><div class="grid-header-title"><a href="?grid-column=FirstName&amp;grid-dir=0">First Name</a></div></th><th class="grid-header"><div class="grid-header-title"><a href="?grid-column=LastName&amp;grid-dir=0">Last Name</a></div></th><th class="grid-header"><div class="grid-header-title"><a href="?grid-column=AgentUserInfo.UserName&amp;grid-dir=0">UserName</a></div></th><th class="grid-header"><div class="grid-header-title"><a href="?grid-column=AgentOfAgency.Name&amp;grid-dir=0">Agency</a></div></th><th class="grid-header"><div class="grid-header-title"><a href="?grid-column=AgentUserInfo.Email&amp;grid-dir=0">Email</a></div></th><th class="grid-header" style="width:15%;"><div class="grid-header-title"><span></span></div></th> </tr> 

       </thead> 
       <tbody> 

<div style="width:100%"> 

[email protected] <div class="grid-action-links"> 
     <a href="/Agent/Details/55" title="Detail View"><i></i></a> 
      <a href="/Agent/Details/55#update" title="Update"><i></i></a> 
      <span class="light1">|</span> 
      <a class="delete" href="/Agent/Delete/55" title="Delete"><i></i></a> 
    </div> 


Malik [email protected] <div class="grid-action-links"> 
     <a href="/Agent/Details/33" title="Detail View"><i></i></a> 
      <a href="/Agent/Details/33#update" title="Update"><i></i></a> 
      <span class="light1">|</span> 
      <a class="delete" href="/Agent/Delete/33" title="Delete"><i></i></a> 
    </div> 


    </div> 




<script type="text/javascript"> 
    //$(document).on("change",function() { 
    // $(".grid-mvc").gridmvc(); 
    // //$(".grid-mvc").gridmvc().refreshFullGrid(); 
    // //$(".grid-mvc").refreshFullGrid(); 
    //}); 
    //$(document).ajaxComplete(function() { 

    //  $(".grid-mvc").gridmvc().refreshFullGrid(); 
    //}); 
</script></tbody> 
      </table> 
       <div class="grid-footer"> 

<div class="grid-footer"> 
    <div class="grid-pager"> 
     <ul class="pagination"> 
      <li><a href="#" class="grid-prev-page" title="Previous Page" style="display: block;"><span class="glyphicon glyphicon-step-backward"></span></a></li> 
       <li class=""><a class="grid-page-link" data-page="1" href="">1</a></li> 
       <li class="active"><a href="" class="grid-page-link" data-page="2">2</a></li> 

      <li><a href="#" title="Next Page" class="grid-next-page" style="display: none;"><span class="glyphicon glyphicon-step-forward"></span></a></li> 
     </ul> 
    </div> 
</div> 

    </div> 

     </div> 
    </div> 

    </div> 




<script type="text/javascript"> 
    //$(document).on("change",function() { 
    // $(".grid-mvc").gridmvc(); 
    // //$(".grid-mvc").gridmvc().refreshFullGrid(); 
    // //$(".grid-mvc").refreshFullGrid(); 
    //}); 
    //$(document).ajaxComplete(function() { 

    //  $(".grid-mvc").gridmvc().refreshFullGrid(); 
    //}); 
</script> 

</div> 

     <script src="/Scripts/gridmvcajax.custom.js"></script> 



     <script src="/Content/Scripts/Global.js"></script> 


    <script type="text/javascript"> 

     $(document).ready(function() { 
      pageGrids.metaData.ajaxify(
      { 
       getPagedData: "/Agent/Grid", 
       getData: "/Agent/Index" 
      }); 
     }); 
     $(document).ajaxComplete(function() { 
      $(".grid-mvc").gridmvc(); 
     }); 
    </script> 


      </section> 
     </div> 
     <footer> 
      <div class="content-wrapper"> 
       <div class="float-left"> 
        <p style="padding-top:10px;">© 2014 - Anchor Bay Insurance Managers, Inc.</p> 
       </div> 
      </div> 
     </footer> 




</body> 
</html>
+1

你的CSS如何加载？它是否包含在布局页面中，还是有一些在运行时应用css的逻辑？ – tintyethan 2014-09-04 14:45:01

+0

它没有加载在布局页面中，它包含在主页中，从中可以呈现网格的局部视图 – 2014-09-08 07:53:17

+0

@tintyethan你能帮我吗？ – 2014-09-08 08:02:19

答

它看起来像你的表格标签越来越剥离出来并转化为div的durring Ajax调用 - 我有同样的问题，并最终将我的表格标签的div - 你可以定义列的div的宽度对于页眉，页脚和表格单元格（现在全部都是div），以便使所有内容正确排列。

相关推荐