Join Chander Dhall for an in-depth discussion in this video Create, part of NoSQL Development with DocumentDB in Azure.
- [Narrator] Now that everything is set up, we're going to go to "DocdbRepository" and we will implement the create method. So in this case, we're going to create an item "Async" In this case our item is a product. So all we really need to do is say: "return await" "client.CreateDocumentAsync", and then use "UriFactory" like we did earlier and create a "DocumentCollectionUri", and all it takes in is the "DatabaseId" and then the "CollectionId".
And we need to pass in the item that we're creating, which in this case is product. That's pretty much it. We need to add "Async" here so it understands that it's an "Async" method, that's exactly what it was complaining for, and now this works. So if I go to my "ProductsController" it clearly does not have a way to create anything. So we're going to go and create that. In this case, again, we can create an "Async" controller, and say "Task of ActionResult".
I'm going to have to use "control + dot" so I can use "Task" here and say "CreateAsync". I would still like for my "ActionName" to be "Create". And once I'm here, all I wanted to do is really go to the "view" with the name "Create" on it. So if I go to my "views" folder, I have something called "products". And then I'm going to go create a "view" which is going to be "create.cshtml", and I can use the same exact layout page that the template has been using, which is in "shared" folder.
And I need to pass in a model here which will be a model of type "Product". So since "Product" is in this namespace, I'm going to have to use this and say, "DocumentDbCourse.Models.Product". I can say, "Create a New Product" and then add a form. And this is really an HTML form, I'm using "razor". You can write plain HTML to do this too. And then of course I'm going to use the "AntiForgeryToken".
And I'm going to have a "div" with "class", in this case we're going to use a form, which is horizontal. This is really nothing but a CSS class that comes with the template. And then I can add my HTML validation summary here, in this case, it's going to have certain parameters. I'm going to set "true" and then if something really goes wrong, I wanted to use a class. Which in this case is another CSS class, which will say "text-danger", that's the name of the class.
And then my actual form group will be here, and I'm going to use class "form-group". So first I'd really need a label for those, and I'm going to go ahead and create "Html.LabelFor" and in this case, the label is going to be for "name". Now I'm calling it model, you can call it anything you want to, because this is really nothing more than a Lambda. And then we can pass in HTML attributes if we need to, or we can completely remove it. And then I want to add another class for "column" and in this case we can give it anything, I'm just going to say "ten", I don't think we need ten, could be less than that, but really doesn't matter.
It should be able to handle the columns. And then "EditFor" and in this case, like I said, we can call it something else, I'm just going to use "m" in this case. And then I can say "name", just to show you that it really was a Lambda. And then I can have a message here, but for now I'm just going to go ahead and remove that. To keep it simple, we can always add that later. So we have "Create" right here, and then you have "div class=form-group" which is exactly what we used earlier. This is another "form-group" and in this case, we've got a class that will still use the same column "md10" that used earlier.
And also say maybe just add an offset here. Again this is CSS, and it really should not bother you at all because what we need is really an "input" which has a "type" equals to "submit" and then we have a "value" equals to "Create". And then we can give it a class of some kind of button, which in this case could be "button" and then more like a "default button". And then at the end, towards the bottom, we can give it a link, which could take us back to index.
But you still don't have a list, but we'll add it later. So for "Create" to work, we have everything we need. And now we need to go to the "ProductsController" and make sure that we can create a "product". So if you look at this, this is really a "get". So what I'm saying is, anytime there's an HTP "get" request which goes to whatever local host port that I'm running it on/create, take me to this particular view, which is exactly what we just created. But when we're at this view, what we need to do is have a form which is submitting something.
So in the controller we need something called "HttpPost" which will actually serve the request, which we're making in "Create.cshtml" which is really the form post. So at this point of time, I'm going to go ahead and create "HttpPost", that's it. And then say "ActionName", I'm going to use the same "ActionName" "Create", and then keep it "Async" to keep it consistent. "Task of action result" and then say "CreateAsync".
And what I like to do is bind all the properties, so when I have "Bind" I'm going to include all the properties. And we had "Id", "Name", "Description" and then "Price". Those are all the properties we have, and I want to bind all these properties to the product class. So this is how "MVC" model binding works, if you need more help on that, feel free to check out other courses on "MVC". So at this point of time, I'm going to go check for the "ModelState" and if the "ModelState" is valid, then I'm going to call my repository and say "CreatItemAsync" which in this case is the product.
And once it does it, I want it to "RedirectToAction" and in this case, it's going to be "Index". Now to make this work, we still need the "index view", and we're not really going to do much with that "index view" for now. And then "return View" of "product", that's it. And then run "control + shift + p" and hope that this compiles. It succeeded. Let's go ahead and create an "index view" just because we're calling the "index view" over and over again.
Once we added the "index view" we need an "IEnumerable" of "Product". I'm going to go back to "Product" to get the namespace. And that should work. So really what we have is a list of products here. And we can call this "Products". Once we have the list, we need to really take that list and make sure that we render that list in a fashion that HTML understands and the browser understands. In this case, we have a table row and we have a table header and I'm going to repeat that for all the properties we have, and then add them one by one.
And I don't think we need the fourth one because that's going to be "Id" so we'll just keep it simple. And add the ones we need, in this case, we can read "Description" and then the "Price". And really that's it for the headers. And the next thing we need to do is add the rows for every single other value. At this point of time, we're going to run "foreach" "var product in Model" and then write our HTML right here.
We need to move the rows inside the curly brackets, so we can have a row for every single product. And in this case, it's going to be "Html.Display" for "Name" and this needs to be in a table cell. And then we're going to repeat these for description and price. And then we can also have links to edit them later that we can add and do a lot of other things. So at this point of time, since we do not really have the model, we're really not parsing the model because we haven't really done anything with "Read", this code should break.
So in order to fix that, what we need to do is come in here and say "if Model not equals null", only then run this part. So for that I'm going to come in here and add the "foreach" as part of the "if" statement. That way, we won't really have anything that's going to be displayed but at the same time we won't really have a bug. "Control + F5", and it work. So at this point of time, what we want to do is at least be able to create a new product. For that I'll just go create an "ActionLink" here that will be called "Create Product" and then action name is going to be "Create".
Now this really won't display everything because all we have is a name here, so what I would like to do is add other properties. So come in here, copy and paste a couple of times and then use other properties. In this case, it's going to be "Description" and then it's going to be "Price". So once we have that, you should be able to do "control + F5" and we can see all the three. So I can go ahead and create the name of the product, it's "iPhone", "iPhone 7 Plus", and the price is about 800 dollars.
And then hit create. So now we created the product, but we're not able to see any of this. Now that's because we haven't really implemented the functionality for listing the products. So does DocumentDb have that product that we just created? Well let's look at it. The first thing we need to do is start our emulator. And once the emulator is running, we can right click on it, and open data explorer, and we come to "local host 8081" and once we go to the explorer, we can actually see our MasterDb which has our products collection which has one ID.
And actually we can see our record right here, that's amazing. So we have the name, description and the price. And these are other properties that DocumentDb adds on its own. So that means this work. So in this particular video, we were able to create a product. Next video, we'll try to retrieve the list of the products after creating it.
- Back-end scaling fundamentals
- Fallacies of distributed computing
- Consistency models
- Data migration
- DocumentDB with .NET and Node.js