无需事件MVC即可重新加载div

时间:2016-11-10 04:59:30

标签: javascript jquery asp.net-mvc

我正在使用MVC在Visual Studio中开展一个项目。在点击btn并且数据已动态发布到控制器后,我正在尝试重新加载div。我使用Ajax帖子并返回一个JSONresult。发布代码如下所示:

<div id = "DelUser">
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "Dform" }))
{
<label> Select User(s) to Delete:  </label>

@Html.ListBox("Users", ViewBag.Users as MultiSelectList,
          new { @class = "chzn-select", @style = "width:250px; height:350 px" })

}
<button class="btn btn-primary dropdown-toggle" id="Button1" type="button" onclick="DeleteUsers()"> Delete Selected </button>
</div>
<script>

function DeleteUsers() {
    var myList = []
    $("#Users > option:selected").each(function () {
        myList.push($(this).val());
    });


    jQuery.ajax({
        type: 'post',
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        url: 'DeleteU',
        data: JSON.stringify(myList),
        success: function (data) {
            $('#msgbx2').html(data.msg);
//here I am trying to refresh the div after the post but it fires every second
            $('#DelUser').html('/Home/DeleteUser');

        },
        failure: function (errMsg) {
            $('#msgbx2').html(data.msg);
        }

    });

    return false;

}

控制器的名称是DeleteUser,JSONresult控制器是DeleteU。

我正在尝试执行此操作,以便在删除所选用户后更新下拉列表。如果还有另一种动态更新此div的方法,那么任何关于它的信息都会很有用。提前谢谢。

以下是控制器:

  [HttpGet]
    public ActionResult DeleteUser()
    {
        List<string> u = new List<string>();
        object[] users = data.getDataFrmDB("Select username From `users`;");
        if (users != null)
        {
            foreach (object[] user in users)
            {
                u.Add((string)user[0]);
            }
        }
        ViewBag.Users = new MultiSelectList(u, "Username");
        return View();
    }
    [HttpPost]
    public JsonResult DeleteU(List<string> Users)
    {

        bool good = false;
        if (Users != null)
        {
            foreach (string user in Users)
            {
                string ins = "DELETE FROM `xcal-server`.`users` WHERE username='"+user+"';";
                good = data.insert_update_delete_DB(ins);
                List<string> u = new List<string>();
                object[] users = data.getDataFrmDB("Select username From `users`;");
                if (users != null)
                {
                    foreach (object[] usera in users)
                    {
                        u.Add((string)usera[0]);
                    }
                }
                ViewBag.Users = new MultiSelectList(u, "Username");
                if (good == true)
                {
                    ViewBag.error = "You have successfully deleted user";
                }
                else
                {
                    ViewBag.error = "There was an issue removing user";
                }

            }

            return Json(new { msg = "You have Successfully deleted Users " });
        }

        return Json(new { msg = "the passwords entered do not match" });
    }

这只是我的主页的一部分,其中包含其他动作功能/控制器,这就是我最初没有发布控制器的原因

2 个答案:

答案 0 :(得分:0)

我认为您需要在脚本周围添加 private static DataTable ReadFTP_CSV() { String ftpserver = "ftp://servername/ImportData/xxxx.csv"; FtpWebRequest reqFTP = (FtpWebRequest)FtpWebRequest.Create(new Uri(ftpserver)); reqFTP.Credentials = new NetworkCredential(ftpUserID, ftpPassword); FtpWebResponse response = (FtpWebResponse)reqFTP.GetResponse(); Stream responseStream = response.GetResponseStream(); // use the stream to read file from FTP StreamReader sr = new StreamReader(responseStream); DataTable dt_csvFile = new DataTable(); #region Code //Add Code Here To Loop txt or CSV file #endregion return dt_csvFile; }

答案 1 :(得分:0)

您只需删除当前选定的项目即可更新现有列表框。首先从按钮中删除onclick="DeleteUsers(),然后使用Unobtrusive JavaScript。由于您似乎没有DeleteUser()的POST方法或提交按钮,因此您也可以仅使用@using (Html.BeginForm(...))元素替换<form>。然后该脚本将

$('#Button1').click(function () {

    var selected = $('#Users option:selected'); // store the selected users
    if (selected.length == 0) {
        return; // no point making a post
    }
    var users = [];
    $.each(selected, function (index, item) {
        users.push($(this).val());
    })
    $.ajax({
        type: 'post',
        dataType: 'json',
        url: '@Url.Action("DeleteU", "yourControllerName")', // always use Url.Action to generate your url's
        data: { users: users },
        traditional: true,
        success: function () {
            // remove the currently selected options
            selected.remove();
        }
    });
})

然而,控制器中的许多代码都没有意义。您将值添加到ViewBag,甚至创建了SelectList,但是您没有返回视图(返回的json),所以这一切都将丢失。即使您返回一个视图,您的循环也会覆盖ViewBag.error的值,以便只设置最后一个值。理想情况下,您应该通过传递用户名(或用户名集合以便在事务中删除它们)来调用服务来删除用户。但基于您当前的代码,您可以使用控制器方法

[HttpPost]
public JsonResult DeleteU(List<string> Users)
{
    if (Users == null)
    {
        // throw an error that can be caught in the ajax error handler
    }
    List<string> deletedUsers = new List<string>();
    foreach (string user in Users)
    {
        string ins = "DELETE FROM `xcal-server`.`users` WHERE username='"+user+"';";
        if (data.insert_update_delete_DB(ins))
        {
            deletedUsers.Add(user);
        }
    }
    return Json(deletedUsers);
}

然后是ajax成功回调

success: function (data) {
    $.each(data, function(index, item) {
        // remove each item that was successfully deleted in the controller
        $('#Users option:contains("' + item + '")').remove();
    }
}