Question

我陷入两难境地。我从控制器收到2个对象：一个id和一个long数组。加载页面时，勾选"tlocations"指定的索引处的复选框。然后用户勾选/取消勾选复选框并按下“submit-btn”。该按钮进行AJAX调用并将更改保存到数据库中。但是，在AJAX调用之后，复选框被禁用！

如果我希望刷新后复选框保持禁用状态，我应该如何处理此问题？我应该创建一个在刷新之前更改状态的后端变量，然后在第二次呈现视图时在ViewData中发送吗？或者还有其他类似Cookie的方式吗？

为了进一步说明，我添加了架构。希望它有所帮助。

控制器

 public IActionResult Index() 
            {                     
             ViewData["tstory"]=JsonConvert.SerializeObject(TempData.Get<Story("tstory"));

                if(ViewData["tstory"]!=null)
                {
                ViewData["tlocations"]=JsonConvert.SerializeObject(TempData.Get<IEnumerable<long>>("tlocations"));
                TempData.Keep();
                return View(context.Locations);
                }
                return RedirectToAction("Index","Story");
           }

View:

<head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script type="text/javascript" src="~/js/TableOps.js"></script>
      <script type="text/javascript" src="~/js/BtnHandlers.js"></script>
      <script>    
         $(document).ready(function(){

            var _story=@Html.Raw(ViewData["tstory"]);
            var indexes=@Html.Raw(ViewData["tlocations"]);
            var tableName=$("#table1").attr("id");

            Initialize(tableName,indexes,_story);

            $("#submit-btn").bind( "click", function(elem) {
                var locations=getLocations(tableName);
                AttachBtnHandler(locations,function(){checkLocationTable (indexes,tableName);});
            });
         });
      </script>       
   </head>

Ajax调用

function AttachBtnHandler(locations,disableCheckboxes)
{
    var result=ajaxCall('post','/Location/Attach',locations);
    $("input[type='checkbox']")
        .each(function(index,elem){
                $(elem).prop("checked",false);
                $(elem).prop("disabled",true);
        });
}

    function ajaxCall(methodType,desturl,payload=null,dataType='json')
    {

         if(payload==null)
         {
             return;
         }
         var response=null;
         $.ajax({
                type:methodType,
                url:desturl,
                data:JSON.stringify(payload),
                contentType:"application/json;charset=utf-8",
                dataType:dataType,
                success:function(resp)
                {
                    alert("Values sent successfully!");
                    response=resp;
                },
                failure:function(resp)
                {
                    alert("Failure to send data");
                    response=resp;
                },
                error:function(xhr, status, error)
                {
                    alert("Error:"+error);
                }
        });
        return response;           
     }

Answer 1

我甚至看不到你的HTML代码，但看看这个：

背后的代码

string getStatus = "checked";
        bool s = false;
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        protected void OnChangeEvent(object sender, EventArgs e)
        {
            getStatus = CheckBox1.Checked == true ? "checked" : "unchecked";
            checkbool();
        }

    protected bool checkbool()
    {
        return s = getStatus == "checked" ? true : false;
    }

脚本：

<script src="Scripts/jquery-1.10.2.js"></script>
   <script>
       $(document).ready(function () {
        $("#CheckBox1").prop("checked", <%=checkbool()%>);
        $("#CheckBox1").prop("disabled", true);

       });
   </script>

HTML

<div>
        <asp:CheckBox ID="CheckBox1" runat="server"  AutoPostBack="true" OnCheckedChanged="OnChangeEvent"/>
    </div>

即使刷新页面，它也会将复选框的状态恢复为已选中或未选中状态。

刷新后在页面上保持状态

1 个答案: