イベントなしでリロードdivが絶えず動きますMVC

Question

私はMVCを使ってVisual Studioでプロジェクトを進めています。私はbtnがクリックされ、データがコントローラに動的に投稿された後にdivをリロードしようとしています。私はAjax投稿を使用してJSON結果を返します。

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

これは私が元々のコントローラに

Answer 1

現在選択されている項目を削除するだけで、既存のリストボックスを更新することができます。まず、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); 
} 

、その後することができコントローラアヤックス成功コールバック

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

Answer 2

を投稿していなかった理由はそれで他のアクション機能/コントローラを持っている私のメインページのセクションだけですあなたのスクリプトの周りに$(document).ready(function(){});を追加する必要があると思います。