ASP. Zero--10. An example (3) Commodity classification management-new

1. Open the Index view page to add a button with the following code:

<divclass="Row margin-bottom-5"> <divclass="col-xs-6"> <divclass="Page-head"> <divclass="Page-title"> "Categorymanager") </small>     @* Here is the added button code *@    <divclass="col-xs-6 text-right"> <button id="Createnewcategorybutton" class="btn Btn-primary Blue"><iclass="FA Fa-plus"></i> Add categories </button> </div></div>

The effect is as follows: Clicking the button pops up a modal box to add 2. Modal box Create a new view _createmodal.cshtml in the category directory with the following code:

@using mycompanyname.abpzerotemplate.web.areas.mpa.models.common.modals@html.partial ("~/Areas/Mpa/Views/ Common/modals/_modalheader.cshtml ", New Modalheaderviewmodel (" add Category "))<Divclass= "Modal-body">    <formname= "Categoryform">        <Divclass= "Form-group form-md-line-input form-md-floating-label">            <inputclass= "Form-control"type= "text"name= "Name">            <label>Name</label>        </Div>    </form></Div>@Html. Partial ("~/areas/mpa/views/common/modals/_modalfooterwithsaveandcancel.cshtml")

Also create a new JS file _createmodal.js, the code is as follows:

(function($) {App.modals.CreateCategoryModal=function () {        var_categoryservice =abp.services.app.category; var_$categoryform =NULL; var_modalmanager;  This. init =function(Modalmanager) {_modalmanager=Modalmanager; //Remove Form form_$categoryform = _modalmanager.getmodal (). Find (' form[name=categoryform] ');        };  This. Save =function () {            //Serialization Parameters            varCategory =_$categoryform.serializeformtoobject (); _modalmanager.setbusy (true); _categoryservice.createcategory (category). Done (function() {Abp.notify.info (App.localize (' Savedsuccessfully '));                _modalmanager.close (); Abp.event.trigger (' App.createcategorymodalsaved '); }). Always (function() {_modalmanager.setbusy (false);        });    }; };}) (jQuery);

3. Add the new method to open the Icategoryappservice file and add the following code:

void Createcategory (createcategoryinput input);

The corresponding implementation class Categoryappservice, add the following code:

 Public void createcategory (Createcategoryinput input) {       _categoryrepository.insert (new  Category ()       {           = input. Name       });

4. Add a DTO Create a new class CreateCategoryInput.cs under the DTO directory with the following code:

 Public class Createcategoryinput:entitydto,iinputdto    {        publicstringgetset;}    }

5. Modify Index.js finally open the Index.js and add the following code:

...var_categoryservice =abp.services.app.category; var_createmodal =Newapp. Modalmanager ({ViewUrl:abp.appPath+ ' Mpa/category/createmodal ',//Load ViewScriptUrl:abp.appPath + ' areas/mpa/views/category/_createmodal.js ',//load corresponding JSModalclass: ' Createcategorymodal '        });...//page finishes loading executiongetcategories (); //Add a Click event$ (' #CreateNewCategoryButton '). Click (function() {_createmodal.open ();        }); //Event RegistrationAbp.event.on (' app.createcategorymodalsaved ',function() {getcategories (true); });

6. The controller opens Categorycontroller and adds the following code:

 Public ActionResult Createmodal () {      return partialview ("_createmodal" );}

Finally, rebuild the project, refresh the page, click Add Category

ASP. Zero--10. An example (3) Commodity classification management-new