Hi! I'm trying to refresh the data in a ListBox after an item has been added or removed. I'm rendering the ListBox inside a partial with following code:
View:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="berufsabschlussModal">Qualifikation bearbeiten</h4>
</div>
<div class="modal-body">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
@using (Html.BeginForm("AddQualifikation", "Qualifikation", FormMethod.Post))
{
@Html.AntiForgeryToken()
<div class="input-group">
<input type="text" class="form-control" value="@Model.Bezeichnung" name="Bezeichnung">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit"><i class="fa fa-plus fa-lg"></i> Neu</button>
</span>
</div>
}
</div>
</div>
<div class="row">
@using (Html.BeginForm("EditQualifikation", "Qualifikation"))
{
<div class="col-md-12">
<br />
@Html.EJ().ListBox("editQualifikation").ClientSideEvents(e=>e.Selected("Onselect")).Width("100%").Height("355").Datasource((IEnumerable<QualifikationView Model>)ViewBag.datasource).ListBoxFields(df=>
df.ID("QualifikationID").Text("Bezeichnung").Value("Bezeichnung"))
@Html.EJ().ScriptManager()
</div>
}
<div class="col-md-12">
<br />
<div class="input-group">
<span class="text-right">Ausgewählte Qualifikation löschen:</span>
<span class="input-group-btn">
@using (Html.BeginForm("DeleteQualifikation", "Qualifikation", FormMethod.Post))
{
<button class="btn btn-danger" type="button" onclick="DelQual(this)">
<i class="fa fa-trash fa-lg"></i> Löschen
</button>
<div id="showErrorMessage"></div>
@Html.ValidationSummary()
}
</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-actions no-color pull-right">
<div id="mydata"></div>
<button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
</div>
</div>
</div>
<script type="text/javascript">
selecteditem_id = 0;
function Onselect(args) {
selecteditem_id = args.item.attr("id")
}
function DelQual(args) {
$.ajax({
type: 'POST',
url: '/Qualifikation/DeleteQualifikation/' + selecteditem_id,
//data: { id: selecteditem_id },
success: function (data) {
if (data.result) {
$(':input', '#myForm')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
}
else
{
$('#editQualifikation').ejListBox("refresh");
}
}
});
}
</script>
Controller:
[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult AddQualifikation(QualifikationViewModel model, string Bezeichnung)
{
bool isSuccess = false;
Mapper.Initialize(cfg =>
{
cfg.CreateMap<QualifikationViewModel, Qualifikation>();
cfg.CreateMap<Qualifikation, QualifikationViewModel>();
});
ViewBag.datasource = new CareContext().Qualifikation
.Select(m => new QualifikationViewModel
{
QualifikationID = m.QualifikationID,
Bezeichnung = m.Bezeichnung
}).ToList();
Qualifikation qualifikation = Mapper.Map<QualifikationViewModel, Qualifikation>(model);
Qualifikation q = db.Qualifikation.OrderByDescending(c => c.Stufe).FirstOrDefault();
int newId = (null == q ? 0 : q.Stufe) + 1;
qualifikation.Stufe = newId;
qualifikation.QualifikationID = 4;
db.Qualifikation.Add(qualifikation);
db.SaveChanges();
return Json(new { result = isSuccess, responseText = "Something wrong!"
});
Another issue I'm facing is that when customizing the width, ListBox doesn't seem to get initialized properly:
